CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Jacinto
Jacinto

Reputation: 180

html5 canvas drawing mutiple images and overlapping

I draw mutiple images in canvas, but i want that the user be able to define the overlapping of the image. In other words, th user select the image that appears in the front, and the image that appears in behind. how can i accomplished that?

Upvotes: 0

Views: 2505

Answers (3)

Dipta Das
Dipta Das

Reputation: 402

Use "min-height" and "min-width" while creating the div for randering chart.

Upvotes: 5

Jarrod
Jarrod

Reputation: 9465

The image on top is always the last image drawn.

A solution I use when bringing an image to the front, when it's selected, is to store all the images in array - this will also be the draw order - and the image to be on top is simply taken out of the array and placed at the end, thus being on top.

Upvotes: 0

Gijs
Gijs

Reputation: 5262

You can accomplish this, assuming you only care to render the next image to be on the canvas 'in front' or 'behind' the images which were already rendered (ie not to post-facto render an image 'between' two images you already rendered on the canvas) using the globalCompositeOperation property of the 2d canvas context. MDN has an illustrative example and comprehensive documentation. Basically, in your case if you want to render the next image 'above', you would use "source-over" as a value for this property, if you want to render it behind the existing content, use "destination-over".

If you want more detailed control over the overlap of more than 2 images, you will have to adjust the order in which they are rendered as suggested in the comments so far (ie put the images in an array, sort the array in the desired fashion, and then render them).

Upvotes: 1

Related Questions