Question

I’ve got a canvas that includes images, I’m re-drawing 1 pixel lower each time to give the effect of falling. I’ve got the images in an array and I just place them 1 pixel lower without recreating the image.

Is it possible to add a border dynamically to images that reach a certain point and if so, how?

Answer 1

Yes, all you have to do is draw a path outside the image and call ctx.stroke() to make the border.

So say the image has the coordinates x and y, with a width and height of w and h, you just do:

ctx.rect(x, y, w, h);
ctx.stroke();

Want a different colored border?

ctx.strokeStyle = 'blue';

Thicker?

ctx.lineWidth = 5;