原文：https://developer.mozilla.org/en/Canvas_tutorial/Using_images 

Canvas另一大運用就是可以對圖片進行二次創作或修改。貌似這個是目前唯一一個辦法可以動態的往圖片上加字的方法^o^。圖片的格式可以是任意一種Gecko瀏覽器支持的格式，并且在同一頁面上的其他canvas竟然也可以作為源來引用。

Importing images

圖片的導入需要2個步驟：

• 首先，我們需要一個javaScript中的image對象或者另一個canvas對象最為源，而不是簡單的提供一個圖片地址就可以的。
• 其次，我們需要采用drawImage方法在canvas上繪制圖形。

我們先來看下第一個步驟，會有4種基本選項供運用：

利用同一頁面上的圖片
我們可以利用document.images，document.getElementsByTagName，document.getElementById等方法獲取同一頁面上的圖片對象。

利用其它canvas對象
我們可以用document.getElementsByTagName，document.getElementById等方法獲取canva對象，不過請先確保你需要獲取的canvas對象中已有繪制內容。

用腳本創建一個圖形對象
另一個方法就是用腳本創建一個image對象。不過此舉最大的缺點就是腳本會等待圖片對象完全載入后才會handle接下來的腳本，而在途中我們無法讓它停止圖片的loading。

  1. var img = new Image();   // Create new Image object     2. img.src = 'myImage.png'; // Set source path  

當腳本執行時，圖片便開始loading，如果當執行drawImage方法時圖片仍未停止loading，腳本便會暫停執行直至圖片載入完成。如果你不想讓此情形發生，我們可以利用以下的onload事件來handle：

  1. var img = new Image();   // Create new Image object     2. img.onload = function(){     3.   // execute drawImage statements here     4. }     5. img.src = 'myImage.png'; // Set source path  

用data:url方式引用圖片
還有一種對圖片的引用方式為data:url。它允許你用一個Base64編碼的描述字符串來定義圖片。用data urls的一個好處就是圖片會在你的界面立即顯示而無需去server上下載（或許另一個好處就是我們可以把HTML/JS/CSS/IMAGE都集成在一個文件中^o^），當然，此方式不好的地方也顯而易見：如果圖片的尺寸過大的話，這個描述字符串也會非常之長哦～～。