CODEWITHSUNDEEP
javascriptcanvasfabricjs
user8096456
user8096456

Reputation:

How to make an image in the canvas fixed, undraggable, and unselectable using fabricjs

I want to get this image fixed in the canvas so that if I add a text or another image, the image/text will not go back.

<script> function GateFoldClick() {
     canvas.clear();
     fabric.Image.fromURL('images/FourFoldBrochure.jpg', function (myImg) {
         canvas.add(myImg);
         myImg.center();
     });
 }
 </script>

output preview

Upvotes: 1

Views: 1452

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

You could achieve that using setBackgroundImage() method.

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
   img.setWidth(200);
   img.setHeight(200);
   canvas.setBackgroundImage(img);
   canvas.renderAll();
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Upvotes: 5

Related Questions