螢幕外的畫布

很多時候，在使用畫布時，你需要使用畫布來儲存一些內部畫素資料。可以輕鬆建立螢幕外畫布，獲取 2D 上下文。螢幕外的畫布也將使用可用的圖形硬體進行渲染。

以下程式碼只是建立一個畫布並用藍色畫素填充它。

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

很多時候，螢幕外的畫布將用於許多工，你可能有很多畫布。要簡化畫布的使用，可以將畫布上下文附加到畫布。

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);