最簡單使用Canvas元素： 
<canvas width="300" height="300"></canvas> 
這樣就創建出一個空白畫布。 

但是這樣創建出的畫布不能隨著瀏覽器視窗大小的改變而動態的改變畫布的大小。而這一點往往又非常重要， 因為我們會經常改變瀏覽器視窗大小，不會一直保持某個固定的大小。 

首先可以先準備一個canvas.css 放到html檔案的同一目錄下，css內容： 
Javascript程式碼  

1. * { margin: 0; padding: 0; }  
2.  html, body { height: 100%; width: 100%; }  
3.  canvas { display: block; }  

然後在html檔案裡引入canvas.css: 
<link href="canvas.css"rel="stylesheet" type="text/css"> 
這樣保證整個canvas能填充整個瀏覽器視窗 

但是僅僅是這樣canvas的內容並不能隨著視窗大小的改變而改變。 
我們需要在視窗大小改變的同時調整畫板的大小，所以我們需要在js中加入下面這段程式碼： 

Javascript程式碼  

1. $(window).resize(resizeCanvas);  
2.  function resizeCanvas() {  
3.         canvas.attr("width", $(window).get(0).innerWidth);  
4.         canvas.attr("height", $(window).get(0).innerHeight);  
5.         context.fillRect(0, 0, canvas.width(), canvas.height());  
6.  };  
7.  resizeCanvas();  

這樣畫布就能根據視窗大小自動調整了，並且不會出現滾動條了。 

注：使用$(window).get(0).innerHeight代替$(window).height()是因為後者無法返回所有瀏覽器視窗的完整高度值。這種方法實際效果並不完美，瀏覽器視窗中canvas元素和滾動條的四周仍存在白色區域