通过 rect() 方法来创建三个矩形

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

  var c = document.getElementById("myCanvas");

  var ctx = c.getContext("2d");

  // 红色矩形

  ctx.beginPath();

  ctx.lineWidth = "6";

  ctx.strokeStyle = "red";

  ctx.rect(5, 5, 290, 140);

  ctx.stroke();

  // 绿色矩形

  ctx.beginPath();

  ctx.lineWidth = "4";

  ctx.strokeStyle = "green";

  ctx.rect(30, 30, 50, 50);

  ctx.stroke();

  // 蓝色矩形

  ctx.beginPath();

  ctx.lineWidth = "10";

  ctx.strokeStyle = "blue";

  ctx.rect(50, 50, 150, 80);

  ctx.stroke();

</script>