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 ?
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);