How is context.shadowBlur defined

Question

How is context.shadowBlur defined? It seems that it has something todo with the line width:

var c=document.getElementById("myCanvas1");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="red";
ctx.strokeRect(20,20,100,80); 

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.lineWidth=5;
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.strokeStyle="blue";
ctx.strokeRect(20,20,100,80);

<canvas id="myCanvas1" width="200" height="200"></canvas>

<canvas id="myCanvas2" width="200" height="200"></canvas>

I want to draw only the shadow but no Line and a don't get the relationship and the docs doesn't explain it's value.

wutzebaer · Answer 1 · 2018-04-04T11:17:31.600

The exact definition can be found here: https://html.spec.whatwg.org/multipage/canvas.html#shadows

Shadows are only drawn if the opacity component of the alpha component of the color of shadowColor is nonzero and either the shadowBlur is nonzero, or the shadowOffsetX is nonzero, or the shadowOffsetY is nonzero.

When shadows are drawn, they must be rendered as follows:

    Let A be an infinite transparent black bitmap on which the source image for which a shadow is being created has been rendered.

    Let B be an infinite transparent black bitmap, with a coordinate space and an origin identical to A.

    Copy the alpha channel of A to B, offset by shadowOffsetX in the positive x direction, and shadowOffsetY in the positive y direction.

    If shadowBlur is greater than 0:

        Let σ be half the value of shadowBlur.

        Perform a 2D Gaussian Blur on B, using σ as the standard deviation.

    User agents may limit values of σ to an implementation-specific maximum value to avoid exceeding hardware limitations during the Gaussian blur operation.

    Set the red, green, and blue components of every pixel in B to the red, green, and blue components (respectively) of the color of shadowColor.

    Multiply the alpha component of every pixel in B by the alpha component of the color of shadowColor.

    The shadow is in the bitmap B, and is rendered as part of the drawing model described below.

If the current composition operation is copy, then shadows effectively won't render (since the shape will overwrite the shadow).

How is context.shadowBlur defined

1 Answers1