在HTML <canvas>元素顯示在網頁上矩形對象：
HTML畫布
在<canvas>元素非常適合在HTML製作遊戲。
在<canvas>元素，為您提供需要製作遊戲的所有功能。
使用JavaScript畫畫，寫字，插入圖片，以及更多，到<canvas> 。
.getContext（“2D”）
所述<canvas>元件具有一個內置的對象，稱為getContext("2d")的對象，以用於繪製方法和屬性。
您可以了解更多關於<canvas>元素，和getContext("2d")的對象，在我們的畫布教程 。
入門
為了做一個遊戲，通過創建一個遊戲區啟動，並使其準備好繪圖：
例
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas :
document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
試一試» 對象myGameArea在本教程後面將有更多的屬性和方法。
該功能startGame()調用方法start()的的myGameArea對象。
在start()方法創建一個<canvas>元素，然後它作為第一childnode <body>元素。