SOURCE

function $$(id) {
return document.getElementById(id);
}

window.onload = function () {
    drawSquare()
    drawRect();
    drawPolygon();
    drawStar();
    drawColorPalette();
    drawCircle();
    drawYuanHu();
};
function drawSquare(){
    var c = $$("canvas");
    c.width = 200;
    c.height = 150;
    var ctx = c.getContext("2d");
    ctx.moveTo(50,50);
    ctx.lineTo(50,100);
    ctx.lineTo(150,100);
    ctx.lineTo(50,50);
    ctx.stroke();
}
function drawRect(){
     var c1=$$("canvas1");
    c1.width = 200;
    c1.height = 200;
    var ctx1 = c1.getContext("2d");
    ctx1.fillStyle = 'red';
    ctx1.fillRect(50,50,100,100);
}

function drawPolygon(){
    var c2 = $$("canvas2");
    c2.width=200;
    c2.height=200;
    var ctx2 = c2.getContext("2d");
    createPolygon(ctx2, 4, 100, 75, 50);
    ctx2.fillStyle = "red";
    ctx2.fill()
    
}
/**
 * n:表示n边形
 * dx、dy：表示n边形中心坐标
 * size:表示n边形的大小
 * 只能绘制正多边形，不能绘制不规则多边形
 */
function createPolygon(ctx,n,dx,dy,size){
    ctx.beginPath();
    var degree = (2*Math.PI)/n;
    for(var i=0;i<n;i++){
        var x = Math.cos(i*degree);
        var y = Math.sin(i*degree);
        ctx.lineTo(x*size+dx, y*size+dy)
    }
    ctx.closePath();

}

function drawStar(){
    var c3 = $$("canvas3");
    c3.width=200;
    c3.height=200;
    var ctx3 = c3.getContext("2d");

    ctx3.beginPath();
    for(let i =0;i<5;i++){
        ctx3.lineTo(Math.cos((18+i*72)*Math.PI/180)*50+100, -Math.sin((18+i*72)*Math.PI/180)*50+100);
        ctx3.lineTo(Math.cos((54+i*72)*Math.PI/180)*25+100, -Math.sin((54+i*72)*Math.PI/180)*25+100);
    }
    ctx3.closePath();
    ctx3.stroke()
}


function drawColorPalette(){
    var color4 = $$("canvas4");
    color4.width=200
    color4.height=200;
    var ctx4 = color4.getContext('2d');

    for(let i=0; i<6; i++){
        for(let j=0; j<6; j++){
            // console.log(`rgb(${Math.floor(255-42.5*i)},${Math.floor(255-42.5*i)})`)
            ctx4.fillStyle = `rgb(${Math.floor(255-42.5*i)},${Math.floor(255-42.5*i)})`
             ctx4.fillRect(j*25,i*25,25,25)
        }
    }
}

function drawCircle(){
    var cnv = $$("canvas5");
    var cxt = cnv.getContext('2d');

    //半圆
    cxt.beginPath();
    cxt.arc(60,60,60,0,180*Math.PI/180,true);
    cxt.closePath();
    // 描边
    cxt.strokeStyle = 'hotPink';
    cxt.stroke();

    // 整圆
    cxt.beginPath();
    cxt.arc(120, 80, 50, 0, 360*Math.PI/180, true)
    cxt.strokeStyle = 'blue'
    cxt.stroke();

    //半弧形
    cxt.beginPath();
    // cxt.arc(120,120, 50, 0,90*Math.PI/180,true);
    cxt.arc(120,120, 50,  Math.PI * 150 /180,Math.PI * 30 /180,false);
    // cxt.arc(120,120, 50, 0, ,true);
    cxt.closePath();
    cxt.strokeStyle = 'hotpink';
    cxt.stroke();
}

function drawYuanHu(){
    var cnv1 = $$("canvas6");
    var cxt6 = cnv1.getContext('2d');

    // 绘制一条直线
    cxt6.moveTo(20,20);
    cxt6.lineTo(70,20);
    cxt6.stroke()

    // 绘制圆弧+直线
    cxt6.beginPath();
    cxt6.arc(70,70,50,0,-90*Math.PI/180,true);
    cxt6.moveTo(120,70);
    cxt6.lineTo(120,120);
    cxt6.stroke()
}

<canvas id="canvas" width="200" height="150" style="border:1px solid red"></canvas>
<canvas id="canvas1" width="200" height="150" style="border:1px solid red"></canvas>
<canvas id="canvas2" width="200" height="150" style="border:1px solid red"></canvas>
<canvas id="canvas3" width="200" height="150" style="border:1px solid red"></canvas>
<canvas id="canvas4" width="200" height="150" style="border:1px solid red"></canvas>
<canvas id="canvas5" width="200" height="200" style="border:1px solid red"></canvas>
<canvas id="canvas6" width="200" height="200" style="border:1px solid red"></canvas>