HTML5 canvas draw image with inline border

Question

I have a canvas where I draw images with:

drawImage(...);

How can I add an inline stroke to that image?

Answer 1

As you're not showing what you actually use as arguments for the drawImage() method the answer will be general for two scenarios:

If the image cover the complete canvas you can use something like this:

ctx.beginPath(); 
ctx.strokeStyle = '#f00';  // some color/style
ctx.lineWidth = 2;         // thickness
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

after drawing the image.

If you use different size and position for the image just use the same values for the strokeRect() method:

ctx.drawImage(img, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);

or

ctx.drawImage(img, x, y, w, h, 100, 100, 250, 100);
ctx.strokeRect(100, 100, 250, 100);