var canvasBmo = document.getElementById('canvasBmo');
var ctxBmo = canvasBmo.getContext('2d');
canvasBmo.width = 400;
canvasBmo.height = 400;

var draw = function (){
    ctxBmo.beginPath();
    ctxBmo.fillStyle = "rgba(0,0,0,0.2)";
    ctxBmo.strokeStyle = "rgba(0,0,0,0.2)";
    for(let i=1;i<9;i++){
        let pos = 50*i
        // 畫垂直線
        ctxBmo.moveTo(pos,0);
        ctxBmo.lineTo(pos,400);
        // 畫水平線
        ctxBmo.moveTo(0,pos);
        ctxBmo.lineTo(400,pos);
        // 寫軸 x 座標與 y 軸座標
        ctxBmo.fillText(pos,pos,10);
        ctxBmo.fillText(pos,0,pos);
    }
    ctxBmo.stroke();
    
    // BMO 身體
    ctxBmo.fillStyle = 'hsl(138, 39%, 64%)';
    ctxBmo.beginPath();
        ctxBmo.fillRect(50,50,300,300);
    ctxBmo.closePath();
}

今天的紀錄到這邊，如果路過的大俠有發現有什麼理解有出入的地方，希望能邦幫忙提點一波，乾蝦 ε= ᕕ( ᐛ )ᕗ