Клонировать холст с тканью JS и продолжить редактирование

Question

Я хотел бы клонировать холст с тканью js и продолжить редактирование существующего объекта ткани js на холсте клона, но он не работает. Это показывает, что setBackgroundImage не определено.

$('#btnClick').on('click touchstart', function () {
    var canvas = document.getElementsByTagName("canvas");
    // canvas context
    var context = canvas[0].getContext("2d");
    // get the current ImageData for the canvas
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
    // store the current globalCompositeOperation
    var compositeOperation = context.globalCompositeOperation;
    // set to draw behind current content
    context.globalCompositeOperation = "destination-over";
    //set background color
    context.fillStyle = "#FFFFFF";
    // draw background/rectangle on entire canvas
    context.fillRect(0,0,canvas[0].width,canvas[0].height);

    var tempCanvas = document.createElement("canvas"),
    tCtx = tempCanvas.getContext("2d");
    
    tempCanvas.width = 640;
    tempCanvas.height = 480;
  
    tempCanvas.setBackgroundImage('');
}

<canvas><canvas>

Answer 1

Идея использования библиотеки Fabric состоит в том, чтобы использовать ее методы для упрощения вашей работы. Вы не будете взаимодействовать с элементом canvas напрямую.

Холст loadFromJSON а также toJSON Метод - это то, что вы можете использовать для клонирования копии вашего холста, включая фоновое изображение.

var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
$(document).ready(function() {
    var rect = new fabric.Rect({width: 100, height:200, fill: 'red'});
    canvas.add(rect);
    var circle = new fabric.Circle({radius: 80, fill: 'blue'});
    canvas.add(circle);        
    $('#clone').click(
      function(){canvas2.loadFromJSON(JSON.stringify(canvas), function(){canvas2.renderAll()}); })
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;">
</canvas>
 <input id="clone" type="button" value="clone canvas">
<canvas id='canvas2' width="500" height="400" style="border:#000 1px solid;">
</canvas>