CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Dexter
Dexter

Reputation: 1178

Adding a Border Dynamically to an Image on an HTML5 Canvas

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?

Upvotes: 5

Views: 10246

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63820

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;

Upvotes: 13

Variant
Variant

Reputation: 17365

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.

Upvotes: 1

Related Questions