feat: box-shadow rendering

[niklasvh]

Implements box shadow rendering.

Fixes: #1086
Fixes: #221
Fixes: #1622
Fixes: #1353

[skullface]

THANK YOU!

[a294597562]

it's not support css box-shadow ,for example 'box-shadow: -1px 1px 3px 0 green' ,if the tag also have
css 'border-radius 50%'

[justrealmilk]

doesn't work

[wangkaiwen]

doesn't work

[wangkaiwen]

if(window.devicePixelRatio!==1){

}

[viewtance]

it doesn't work, any special requirement needed?

[wangkaiwen]

it doesn't work, any special requirement needed?

please try to modify the source code according to my picture.
my version1.0.0-rc.3.
line6500

        CanvasRenderer.prototype.mask = function (paths) {
            var x=this.options.x,y=this.options.y;
            this.ctx.beginPath();
            this.ctx.moveTo(x, y);
            this.ctx.lineTo(this.canvas.width+x, y);
            this.ctx.lineTo(this.canvas.width+x, this.canvas.height+y);
            this.ctx.lineTo(x, this.canvas.height+y);
            this.ctx.lineTo(x, y);
            this.formatPath(paths.slice(0).reverse());
            this.ctx.closePath();
        };

line6719

_this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset*window.devicePixelRatio;

[somelou]

it doesn't work, any special requirement needed?

please try to modify the source code according to my picture.
my version1.0.0-rc.3.
line6500

        CanvasRenderer.prototype.mask = function (paths) {
            var x=this.options.x,y=this.options.y;
            this.ctx.beginPath();
            this.ctx.moveTo(x, y);
            this.ctx.lineTo(this.canvas.width+x, y);
            this.ctx.lineTo(this.canvas.width+x, this.canvas.height+y);
            this.ctx.lineTo(x, this.canvas.height+y);
            this.ctx.lineTo(x, y);
            this.formatPath(paths.slice(0).reverse());
            this.ctx.closePath();
        };

line6719

_this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset*window.devicePixelRatio;

thanks! It works in version 1.0.0-rc.5

[deborah-sharpcloud]

using html2Canvas(element, { scale: window.devicePixelRatio }) worked for me (if you don't want to modify the source code)

[ws456999]

using html2Canvas(element, { scale: window.devicePixelRatio }) worked for me (if you don't want to modify the source code)

it doesn't work

[Thul999]

it doesn't work, any special requirement needed?

please try to modify the source code according to my picture.
my version1.0.0-rc.3.
line6500

        CanvasRenderer.prototype.mask = function (paths) {
            var x=this.options.x,y=this.options.y;
            this.ctx.beginPath();
            this.ctx.moveTo(x, y);
            this.ctx.lineTo(this.canvas.width+x, y);
            this.ctx.lineTo(this.canvas.width+x, this.canvas.height+y);
            this.ctx.lineTo(x, this.canvas.height+y);
            this.ctx.lineTo(x, y);
            this.formatPath(paths.slice(0).reverse());
            this.ctx.closePath();
        };

line6719

_this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset*window.devicePixelRatio;

It works but only if the element doesn't have border-radius.

[Amy0714Angela]

html2canvas 1.4.1 , doesn't work,either

[drveresh]

@hakimio, @agenntsmi It is still not working with v1.4.1. Can somebody give us a working example?

[hakimio]

Try changes from PR #2367 to see if it fixes your issue.

[drveresh]

@hakimio I tried all [border-shadow, -webkit-box-shadow, colors(hex,rgb,etc.)] combinations, with outer/inner DIV and/or IMG, but nothing worked.

Can you please share one jsfiddle with an example if it is working for you?

[hakimio]

No, it won't work properly with the released version.
EDIT: at least not when you are using border-radius.