Add box-shadow rendering #1086

eKoopmans · 2017-03-26T22:26:51Z

Feature: Box-shadows

You know 'em, you love 'em: box-shadows! Requests for this feature date back to May 2013.

Implementation

In paintElement, after rendering backgrounds but before borders, there is now renderShadows. It uses a new .mask() tool which behaves the opposite of .clip(), meaning the shadow will be drawn only outside the element container.

This feature includes support of multiple box-shadows.

Related issues/pull requests

#220, #221, #246, #510, #597, #673, #763

AvanishKumar008 · 2017-04-06T05:29:58Z

@eKoopmans @balupton @gatapia @CyberShadow @andyedinborough Have any solution for it. I have same issue please help me ASAP.

CyberShadow · 2017-04-06T08:32:46Z

@AvanishKumar008: Don't be a jerk. Mass-noticing people and begging for help is extremely rude. Not to mention that my only relation to this project is a contribution I made in 2012 (yes, over 5 years ago).

AvanishKumar008 · 2017-04-06T08:47:58Z

@CyberShadow I am just asking. I am not forcing you. If you want to fix you can.

eKoopmans · 2017-04-06T22:24:26Z

Hi @AvanishKumar008, this is a pull request which means I have solved the problem and I'm asking to add the feature into the repository. It won't be added in until the repo owner approves it.

If you want to use html2canvas with this new feature added, you can download this custom build I have made that includes drop-shadow support along with a few other new features and bugfixes. If you find any problems with how drop-shadows are rendered when you use that build, you can comment here to let me know. Thanks!

AvanishKumar008 · 2017-04-07T05:28:19Z

@eKoopmans You did great job for box shadow and some other thing as well but full picture not showing. Please check again and fix it.

Best of luck

eKoopmans · 2017-04-08T17:14:25Z

@AvanishKumar008 I'm happy to take a look if you give me a link to an example, but as it is your comment isn't helpful - in all my tests, box-shadows are now rendering correctly.

If your comment is about rendering of off-screen elements, please comment over there in the appropriate pull request - and again, it's only helpful if you can give me an example of what's not working.

SteKama · 2017-09-27T12:50:09Z

hi to everyone..thanks to eKoopmans that built "this custom build"..but i have a problem with
filter: drop-shadow(5px 5px 5px #222);
i lost it when generate a canvas..how can i do? (sorry for my english language)

eKoopmans · 2017-10-17T11:09:10Z

Hi @SteKama, really sorry about the long wait! Unfortunately the filter CSS is completely separate and isn't supported right now, see #246 #493. Good luck!

bastienlemaitre · 2017-11-28T09:27:51Z

Any update for this PR ?

eKoopmans · 2017-12-06T11:13:58Z

Not yet merged. @niklasvh, I believe most of the logic should still stand up, but I'm not sure about the particulars of how you've changed clip, renderBorder, etc. Basically the functions I added (mask, renderShadows, and shadow) mirrored the behaviour of the existing clip, renderBorders, and rectangle/circle/etc.

niklasvh · 2017-12-07T09:40:31Z

Shouldn't be too hard to integrate this with the rewrite, but I'd rather focus on getting bugfixes done and 1.0.0 out asap before adding any new features.

Webictbyleo · 2018-02-05T17:35:00Z

Not rendering when parent of target element is positioned off screen to avoid using {display:none}. Canvas appears blank. I think integrating this fix to the current release will do since it works well there. I think this was fixed because of introduction of iframe in the current release where the target element is cloned into an iframe even of the parent is hidden. Or what do you think

alex-place · 2018-04-04T02:51:07Z

Any update on this being merged?

gaddafirusli · 2018-06-27T07:56:30Z

Will this be merged anytime soon? Is there a fork out there with shadow support?

CPIEmojiMaker · 2018-09-12T19:26:38Z

When is it going to be merged? Box-shadows are highly used in my project and it would be amazing if it worked someday... @niklasvh

Vincedream · 2018-09-16T08:37:26Z

emmmm，when will this feature merged？it is a very practical feature!!!

skullface · 2018-12-02T07:32:30Z

+1 to merging this one 🙏

qbob · 2019-01-16T07:38:02Z

+1 to merging this one too 🙏

liuchouchou0728 · 2019-01-16T08:00:17Z

+1 to merging this one

NetroScript · 2019-03-13T19:29:41Z

src/renderers/canvas.js

+    var drawShadow = function(shadow) {
+        var info = parseShadow(shadow);
+        if (!info.inset) {
+            context.shadowOffsetX = info.x;


Suggested change

context.shadowOffsetX = info.x;

if (info.spread > 0) {

for (var i = -1; i < 2; i += 2) {

for (var i2 = 1; i2 > -2; i2 -= 2) {

context.shadowOffsetX = info.x + i * info.spread;

context.shadowOffsetY = info.y + i2 * info.spread;

context.shadowColor = info.color;

context.shadowBlur = info.blur;

context.fill();

}

}

return;

}

context.shadowOffsetX = info.x;

When the spread is greater 0 you can draw the shape 4 times to simulate the spread. As long as the spread value is not bigger than double of the actual width / height it should work as intended (or better than not handling it at all).
But it is not possible to do negative spread with this method.

Edit: Additionally it might be good to use shadows.reverse().forEach(drawShadow, this); instead of shadows.forEach(drawShadow, this); on line 72, because the browser (or at least Chrome) draws the box-shadow in the opposite order.

Edit2: I forgot to think about opacity (because in my project I had no opacity / blur) so you can probably scratch all of that because it would only work with info.blur=0 and a color without an alpha value

hakimio · 2019-05-25T11:14:25Z

@niklasvh Would you be willing to merge this if I'd integrated it with v1.0.0 and your latest PR ("Typescript conversion")?

Charlie85270 · 2020-11-19T09:24:40Z

Any update on this being merged?

hakimio · 2020-11-19T11:01:53Z

@Charlie85270 PR #1848 was merged. It works to some degree.

Muneem · 2021-05-01T08:35:12Z

its still not working for me

tonyChenHey · 2021-05-12T09:58:13Z

html2canvas 1.0.0-rc.7 https://html2canvas.hertzen.com

此最新版本box-shadow的渲染還是有問題

eKoopmans mentioned this pull request Mar 27, 2017

Build testing: Broken webdriver task #1088

Closed

eKoopmans added 2 commits March 26, 2017 21:24

Remove grunt webdriver task for pull requests

e58fc69

Add box-shadow rendering

32b8d1c

eKoopmans force-pushed the feature/box-shadow branch from c74b2fe to 32b8d1c Compare March 27, 2017 01:43

eKoopmans mentioned this pull request Mar 27, 2017

Remove grunt webdriver task for pull requests #1089

Closed

eKoopmans added 3 commits April 6, 2017 17:58

Handle complex masking/clipping

449ef15

Draw drop-shadows with complex shapes

a077b4a

Add container for merge with bugfix/clip-transform

29a15f6

haxxxton mentioned this pull request Jul 17, 2017

Fix clipping on css-transformed elements #1084

Closed

niklasvh force-pushed the master branch 3 times, most recently from 932773c to 1584357 Compare December 3, 2017 10:23

akFace mentioned this pull request Aug 27, 2018

why not update on merged? #1640

Closed

2 tasks

kcak11 mentioned this pull request Nov 13, 2018

Support for css box-shadow - Generated Screenshot doesn't have box-shadow applied. #1622

Closed

NetroScript reviewed Mar 13, 2019

View reviewed changes

niklasvh mentioned this pull request May 26, 2019

feat: box-shadow rendering #1848

Merged

niklasvh closed this in #1848 May 26, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add box-shadow rendering #1086

Add box-shadow rendering #1086

eKoopmans commented Mar 26, 2017

AvanishKumar008 commented Apr 6, 2017

CyberShadow commented Apr 6, 2017

AvanishKumar008 commented Apr 6, 2017

eKoopmans commented Apr 6, 2017

AvanishKumar008 commented Apr 7, 2017

eKoopmans commented Apr 8, 2017

SteKama commented Sep 27, 2017

eKoopmans commented Oct 17, 2017

bastienlemaitre commented Nov 28, 2017

eKoopmans commented Dec 6, 2017

niklasvh commented Dec 7, 2017

Webictbyleo commented Feb 5, 2018 •

edited

Loading

alex-place commented Apr 4, 2018

gaddafirusli commented Jun 27, 2018

CPIEmojiMaker commented Sep 12, 2018

Vincedream commented Sep 16, 2018

skullface commented Dec 2, 2018

qbob commented Jan 16, 2019 •

edited

Loading

liuchouchou0728 commented Jan 16, 2019

NetroScript Mar 13, 2019 •

edited

Loading

hakimio commented May 25, 2019

Charlie85270 commented Nov 19, 2020

hakimio commented Nov 19, 2020

Muneem commented May 1, 2021

tonyChenHey commented May 12, 2021

-            context.shadowOffsetX = info.x;
+            if (info.spread > 0) {
+                for (var i = -1; i < 2; i += 2) {
+                    for (var i2 = 1; i2 > -2; i2 -= 2) {
+                        context.shadowOffsetX = info.x + i * info.spread;
+                        context.shadowOffsetY = info.y + i2 * info.spread;
+                        context.shadowColor = info.color;
+                        context.shadowBlur = info.blur;
+                        context.fill();
+                    }
+                }
+                return;
+            }
+            context.shadowOffsetX = info.x;

Add box-shadow rendering #1086

Add box-shadow rendering #1086

Conversation

eKoopmans commented Mar 26, 2017

Feature: Box-shadows

Implementation

Related issues/pull requests

AvanishKumar008 commented Apr 6, 2017

CyberShadow commented Apr 6, 2017

AvanishKumar008 commented Apr 6, 2017

eKoopmans commented Apr 6, 2017

AvanishKumar008 commented Apr 7, 2017

eKoopmans commented Apr 8, 2017

SteKama commented Sep 27, 2017

eKoopmans commented Oct 17, 2017

bastienlemaitre commented Nov 28, 2017

eKoopmans commented Dec 6, 2017

niklasvh commented Dec 7, 2017

Webictbyleo commented Feb 5, 2018 • edited Loading

alex-place commented Apr 4, 2018

gaddafirusli commented Jun 27, 2018

CPIEmojiMaker commented Sep 12, 2018

Vincedream commented Sep 16, 2018

skullface commented Dec 2, 2018

qbob commented Jan 16, 2019 • edited Loading

liuchouchou0728 commented Jan 16, 2019

NetroScript Mar 13, 2019 • edited Loading

Choose a reason for hiding this comment

hakimio commented May 25, 2019

Charlie85270 commented Nov 19, 2020

hakimio commented Nov 19, 2020

Muneem commented May 1, 2021

tonyChenHey commented May 12, 2021

Webictbyleo commented Feb 5, 2018 •

edited

Loading

qbob commented Jan 16, 2019 •

edited

Loading

NetroScript Mar 13, 2019 •

edited

Loading