四角形を描く

//コンテキストを取得
let canvas = document.querySelector('#canvas');
canvas.width = 640;
canvas.height = 640;

let context = canvas.getContext('2d');

sikaku(0,0,30,20);

sikaku(200,100,40,50);

sikaku(300,10,100,10);

function sikaku(x,y,zx,zy){
    // 枠線なし
    context.beginPath();
    context.rect( x, y, zx, zy);
    context.fillStyle = "lightskyblue";
    context.fill();
}

//丸
context.arc( 100, 100, 50, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fill() ;