JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="440" height="300">您的浏览器不支持canvas!</canvas>

CSS

canvas {
    border:1px solid #CCC;
}

JavaScript

var canvas = document.getElementById("myCanvas");
if (!canvas.getContext) {
    return;
}

var ctx = canvas.getContext("2d");
drawRect();
drawHollowRect();
clearRect();

function drawRect() {
    ctx.save();
    ctx.fillStyle = "#000000";
    ctx.fillRect(10, 10, 200, 100);
    ctx.restore();
}

function drawHollowRect() {
    ctx.save();
    ctx.strokeStyle = "#FF6600";
    ctx.strokeRect(220, 10, 200, 100);
    ctx.restore();
}

function clearRect() {
    ctx.save();
    ctx.fillStyle = "#CCC";
    ctx.fillRect(10, 120, 410, 100);
    ctx.clearRect(15, 125, 400, 90);
    ctx.restore();
}