在 canvas 插入小圖時
要先建立一個物件是放圖片專用的
再用 drawImage() 把圖畫上去

var cvs = document.getElementById("cvs");
var ctx = cvs.getContext('2d');

var imgObj = new Image();
imgObj.src = "test.jpg";
ctx.drawImage(imgObj, 0, 0);

為什麼會說小圖
因為在等待圖片下載時而程式還是會繼續向下執行
所以在圖片還沒下載完成前
程式就已經跑完的話圖片就不會出現了

要避免這個情況發生
就要先用onload把畫在canvas的動作包起來
讓圖片下載完成後才把圖畫上去

imgObj.onload = function(){
    ctx.drawImage(imgObj, 0, 0);
}

drawImage(imgObj, x, y, width, height)的參數中
width, height 可省略，預設是保持圖片原始大小

還可以把原本是 350x350 的圖設定 350x150

ctx.drawImage(imgObj, 0, 0, 350, 150);

圖就會被壓扁了