Adding a Border Dynamically to an Image on an HTML5 Canvas

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;

Answer 2

If you know your images' size and location and as you draw them you probably do, You can use the .rect canvas method to draw a rectangle around the image.