Canvas要素で図形を描く

<canvas>要素の描画手順

• HTMLで<canvas>要素を定義
• JavaScriptで<canvas>要素への参照を取得
• <canvas>要素の参照からコンテキストを取得
• コンテキストに色や線の太さなどを設定
• コンテキストに対して線や矩形などの描画を行う

    let canvas = document.getElementById("main_canvas");
    let ctx = canvas.getContext("2d");　//描画コンテキストを取得
    
    ctx.strokeStyle = "#ff0000"; //線の色 赤
    ctx.fillStyle="#FFFFFF"; //塗りつぶしの色 白
    ctx.beginPath();
    ctx.moveTo(50,10);
    ctx.lineTo(80,100);
    ctx.stroke();
    
    ctx.fillRect(0,0,640,360);　//四角を描画　640＊360