search

caleb531 / jcanvas

A jQuery plugin that makes the HTML5 canvas easy to work with.
https://projects.calebevans.me/jcanvas/
MIT License
626 stars 192 forks source link

How to control order layers are drawn? #168

Closed PowellT closed 9 years ago

PowellT commented 9 years ago

If I have an image, a rectangle and a some text and I need to order them (by z) image z=0, rectangle z=1, text z=2 How would I do that with jcanvas?

caleb531 commented 9 years ago

Typically, the order is dictated by the order in which you create the layers. If one of those happens to be an image, use addLayer() instead of normal drawing methods (such as drawImage() with layer: true).

The reason for this is because those drawing methods not only add the layer to the jCanvas layers array, but draws it instantly too (and image drawing is asynchronous in jCanvas—that's just the way it works). However, if you add your layers first with addLayer() and then call drawLayers() afterwards, then jCanvas can automatically defer drawing of successive layers until the image layer has been loaded and drawn.

If you need to move a layer at any point, use the moveLayer() method and call drawLayers() afterwards to see the change.

Caleb

PowellT commented 9 years ago

Makes sense. Thank you for the quick reply and for making such a great plugin!!