CODEWITHSUNDEEP
htmlcanvas
user963936
user963936

Reputation: 669

How to place an image behind other drawings on Canvas?

I am using Canvas in HTML5. I load some images and then would like to draw some lines and such on top of them.

But the images are always positioned on top, regardless of the order in which I execute these commands. Is there a way to force them to be drawn on top?

Upvotes: 3

Views: 3014

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63830

You have to draw everything after the image loads

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);   
    // then draw other stuff 
    ctx.fillRect(50,50,150,150);
}
img.src = 'http://placekitten.com/500/500';

Live example:

http://jsfiddle.net/XkYN7/

Upvotes: 3

Related Questions