SOURCE

var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");

// ctx.fillStyle = "rgb(200,0,0)";
// ctx.fillRect(10, 10, 55, 50);

// ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
// ctx.fillRect(30, 30, 55, 50);

// ctx.fillRect(25, 25, 100, 100);
// ctx.clearRect(45, 45, 60, 60);
// ctx.strokeRect(50, 50, 50, 50);


// ctx.beginPath();
// ctx.moveTo(75, 50);
// ctx.lineTo(100, 75);
// ctx.lineTo(100, 25);
// ctx.fill();

// ctx.beginPath();
// ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
// ctx.moveTo(110, 75);
// ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)
// ctx.moveTo(65, 65);
// ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
// ctx.moveTo(95, 65);
// ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
// ctx.stroke();


// 填充三角形
// ctx.beginPath();
// ctx.moveTo(25, 25);
// ctx.lineTo(105, 25);
// ctx.lineTo(25, 105);
// ctx.fill();

// 描边三角形
// ctx.beginPath();
// ctx.moveTo(125, 125);
// ctx.lineTo(125, 45);
// ctx.lineTo(45, 125);
// ctx.closePath();
// ctx.stroke();


// ctx.beginPath()
// ctx.arc(25,25,20,0,Math.PI/2,false)
// ctx.stroke()

    // for (var i = 0; i < 4; i++) {
    //   for (var j = 0; j < 3; j++) {
    //     ctx.beginPath();
    //     var x = 25 + j * 50; // x 坐标值
    //     var y = 25 + i * 50; // y 坐标值
    //     var radius = 20; // 圆弧半径
    //     var startAngle = 0; // 开始点
    //     var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
    //     var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

    //     ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    //     if (i > 1) {
    //       ctx.fill();
    //     } else {
    //       ctx.stroke();
    //     }
    //   }
    // }

// 二次贝塞尔曲线
    // ctx.beginPath();
    // ctx.moveTo(75, 25);
    // ctx.quadraticCurveTo(25, 25, 25, 62.5);
    // ctx.quadraticCurveTo(25, 100, 50, 100);
    // ctx.quadraticCurveTo(50, 120, 30, 125);
    // ctx.quadraticCurveTo(60, 120, 65, 100);
    // ctx.quadraticCurveTo(125, 100, 125, 62.5);
    // ctx.quadraticCurveTo(125, 25, 75, 25);
    // ctx.stroke();



     //三次贝塞尔曲线
    // ctx.beginPath();
    // ctx.moveTo(75, 40);
    // ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    // ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    // ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    // ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    // ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    // ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    // ctx.fill();

const img = new Image()
img.onload = function () {
    ctx.drawImage(img, 0, 0)
}
img.src = 'https://sm.ms/image/NisJwaZHMf1e39b'

<canvas id="tutorial" width="600" height="400"></canvas>

canvas {
    border: 1px solid #000;
}