How To Copy From One Canvas To Other Canvas

here is the jsfiddle i have this as my source canvas HTML

Source Canvas

Destinatio

Solution 1:

You can directly copy one canvas over other. Like this...

var destinationCtx;

//get the destination context
destinationCtx = destinationCanvas.getContext('2d');

//copy the data
destinationCtx.drawImage(sourceCanvas, 0, 0);

Solution 2:

You can use getImageData from the source canvas and putImageData to the destination canvas.This is the fastest one compare to other ways.

var sourceCtx, destinationCtx, imageData;

sourceCtx = sourceCanvas.getContext('2d');
destinationCtx = destinationCanvas.getContext('2d');

imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width - 1, sourceCanvas.height - 1);

destinationCtx.putImageData(imageData, 0, 0);

source:/ https://jsperf.com/copying-a-canvas-element