Search code examples
canvastimeduplicatesclonefabricjs

Duplicate/Clone HTML5 canvas in realtime

I would like to know if it is possible to work on a canvas (#canvas1), while having the same result on another canvas (#canvas2) in the same page ?

ie if I drag / drop of the elements in the canvas No. 1, I see appear the same thing on the second.

if possible what is the procedure ?

by the way i am working with fabric.js

Thank you

Solution

  • thanks, here is my code

    var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.StaticCanvas('canvas2');

// doing some stuffs on 'canvas'
(...)

// clonage into canvas2
var c=document.getElementById("canvas2");
var ctx=c.getContext("2d");
var fabricHtmlCanvasElement = document.getElementById('canvas');

canvas.on('after:render', function(options) {
  updateCanvas();
});

function updateCanvas(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(fabricHtmlCanvasElement,0,0);
}

    it works perfectly thanks