SOURCE

let drawing = document.getElementById("drawing");
if(drawing.getContext) {
    let context = drawing.getContext("2d");

	// 开始路径
    context.beginPath();
    
    // 绘制外圈
    context.arc(100,100,99,0,Math.PI*2,false);

    // 绘制内圈
    context.moveTo(194,100);
    context.arc(100,100,94,0,Math.PI*2,false);

    // 绘制分针
    context.moveTo(100,100);
    context.lineTo(100,20);

    // 绘制时针
    context.moveTo(100,100);
    context.lineTo(35,100);

    // 绘制文字
    context.font = "bold 14px Arial";
    context.textAlign = "center";
    context.baseline = "middle";
    context.fillText("12",100,20);

    // 描边路径
    context.stroke();
}

<canvas id="drawing" width="200" height="200">drawing</canvas>

#drawing {
    background-color: greenyellow;
}