Copy canvas on html5

要複製整張canvas，可以使用getImageData和putImageData。透過getImageData這個method，將整張canvas的資料取出來，在經由putImageData將資料覆蓋上去。

Copy：

取得整張canvas的data：

var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );

在將imageData的資料，塞到copyCanvas對應的data區塊：(在這預設兩張canvas大小都相同)

var cctx = copyCanvas.getContext("2d");
cctx.putImageData( imageData, 0 ,0 );

這樣你就會看到第一張的canvas，完整的copy到第二張上面。

Example：

style

canvas {                     
    border:1px solid gray;
}

html

<canvas id="main" width="300" height="200"></canvas>
<canvas id="copy" width="300" height="200"></canvas>

javascript

//left canvas
var canvas = document.querySelector( "#main" );
var ctx = canvas.getContext("2d");
ctx.fillStyle="#FF0000";  
ctx.fillRect(0,0,150,75); 

//right canvas             
var copy = document.querySelector( "#copy" );
var cctx = copy.getContext("2d");
cctx.fillStyle="#FF00FF"; 
cctx.fillRect(20,20,150,75);

• 把左邊的canvas透過drawImage畫到右邊的canvas：

  cctx.drawImage( canvas, 0 ,0 );

  

• 將左邊的canvas的資料，透過putImageData取代右邊canvas資料：

  var imageData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
  cctx.putImageData( imageData, 0 ,0 );

  

如果使用drawImage，透明部份將不會畫上去，沒辦法完整複製，而putImageData，則是完全取代某區塊的的bytes。