CODEWITHSUNDEEP
csscanvasshadow
mleduque
mleduque

Reputation: 208

Interpret box-shadow as canvas shadowXXX options

I have to draw a bow object in a canvas (2d). The box has an external shadow specified as css definition

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15)

I don't know how to convert this to the canvas way of defining shadows, using shadowOffsetX/Y, shadowColor and shadowBlur.

If I look at the shadowBlur spec, it's explicitely not related to pixels, but it only says "it's a parameter for a gaussian blur effect" (paraphrasing). Actually, I find this to be under-specified.

Would a better approximation using a gradient to transparent instead ? But then won't it miss the blurring effect ?

Upvotes: 2

Views: 1081

Answers (2)

slaviboy
slaviboy

Reputation: 1912

Now there are filters which are similar to the CSS filters properties and accepts the same functions. Although it is still a experimental technology.

// create canvas
const canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;

// set context
const context = canvas.getContext("2d");
context.fillStyle = '#ff0';
context.rect(50, 50, 100, 100);

// set shadow filter
let offsetX = 20;
let offsetY = 0;
let blurRadius = 5;
let color = 'rgba(255, 0, 0, 0.8)';
context.filter = 'drop-shadow('+ offsetX + 'px ' + offsetY + 'px ' + blurRadius + 'px ' + color + ')';
context.fill();

document.body.appendChild(canvas);

Upvotes: 1

Blindman67
Blindman67

Reputation: 54089

The shadow blur is in pixels, and only supports pixel dimensions. A blur of 0 has a sharp edge, 1 is a blur of one pixel, 2 two pixels and so on. It is not affected by the 2d API transformation. Shadow spread is not supported by the canvas 2D API.

BTW values should be qualified. I have added px where you forgot them in the CSS.

So CSS

box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.15);

becomes

ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.15)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 1;

Upvotes: 1

Related Questions