How to keep the image at the back of the HTML5 canvas when moving elements with fabric.js?

To keep the image at the back of the canvas, when move elements, you need to pass:

preserveObjectStacking

And the following would work and the image is not visible in the background:

window.canvas = new fabric.Canvas('c', { preserveObjectStacking:true });

Now, on moving the shape will appear over the image.

Karthikeya Boyini

Published on 11-Apr-2018 07:06:03

• Related Questions & Answers
• HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas for the image?
• Layers of canvas fabric.js
• HTML5 drawImage() method to draw image onto the canvas
• How to rotate an image with the canvas HTML5 element from the bottom center angle?
• Play video on canvas and preserve the last frame/image on HTML5 Canvas
• How to save DIV as Image with HTM5 canvas to image with the extension?
• How to copy the content of one HTML5 Canvas to another Canvas locally?
• Can the HTML5 Canvas element be created from the Canvas constructor?
• Draw part of an image inside HTML5 canvas
• Drawing text to HTML5 <canvas> with @fontface does not work at the first time
• How to save and restore the HTML5 Canvas states?
• Make HTML5 Canvas fill the whole page
• Rotate HTML5 Canvas around the current origin
• How to use images with HTML5 canvas?
• Load image from url and draw to HTML5 Canvas