JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var bg = document.getElementById('caibaojian');
var ctx = bg.getContext('2d');
ctx.beginPath();
//实心
//ctx.fillStyle="#0000ff"; //填充的颜色
//ctx.fillRect(20,20,100,100); //矩形起点为(20,20),长为100，宽为100
//空心
ctx.lineWidth = 10;//边框为10px
ctx.strokeStyle = '#00ff00';//绘制的颜色为#00ff00
//ctx.strokeRect(20,20,100,100);
//如果不使用矩形，也可以通过lineTo()来绘制
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(100,100);
ctx.lineTo(20,100);
ctx.closePath();
//ctx.stroke(); //绘制空心
ctx.fill(); //填充