In my web page there is a canvas with some content and this content is rendered separately (without using fabric.js).

What I want to do is add some content on top of the existing content, using fabric.js . I tried to do that as follow (sample code),

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

But it will remove the existing content from the canvas.

Could you please help me on this?

In my web page there is a canvas with some content and this content is rendered separately (without using fabric.js).

What I want to do is add some content on top of the existing content, using fabric.js . I tried to do that as follow (sample code),

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

But it will remove the existing content from the canvas.

Could you please help me on this?

• javascript
• html
• canvas
• fabricjs

• Where is the canvas with the content already on it? The code you posted works. My best guess would be that you could export your original canvas using canvas.toDataURL() to get a PNG that could be used as the background for your new canvas. Otherwise, you'll have to roll your own method for converting the original canvas to JSON. – Jason Maggard Commented Jan 21, 2015 at 15:13

1 Answer 1

Using the canvas.toDataURL() function as suggested by Jason Maggard:

var c = document.getElementById('c');
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,c.width,c.height);

var bg = c.toDataURL("image/png");

var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage(bg,canvas.renderAll.bind(canvas));
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

The red background should still be there even after you add the fabricjs code. You could also use the canvas.toDataURL() function as the src of a dynamic image, if you want to be able to move it around/etc.

var c = document.getElementById('c');
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,c.width,c.height);

var img = new Image();
img.src = c.toDataURL("image/png");

var canvas = new fabric.Canvas('c');
var oldCanvas = new fabric.Image(img,{ width: c.width, height: c.height });

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });

canvas.add(oldCanvas);
canvas.add(path);