<p>fillRect</p>
<canvas id="fillRect" width="100px" height="100px" class="canvas"></canvas>

<p>stokeRect</p>
<canvas id="stokeRect" width="100px" height="100px" class="canvas"></canvas>

<p>rect</p>
<canvas id="rect" width="100px" height="100px" class="canvas"></canvas>
.canvas {
  border: 1px solid #000;
}
const fillRect = document.getElementById("fillRect");
const fillRectContext = fillRect.getContext("2d");
fillRectContext.fillRect(20, 30, 60, 70);
fillRectContext.clearRect(15, 50, 40, 10);

const stokeRect = document.getElementById("stokeRect");
const stokeRectContext = stokeRect.getContext("2d");
stokeRectContext.strokeRect(20,30, 90, 80);

const rect = document.getElementById("rect");
const rectCxt = rect.getContext("2d");
rectCxt.rect(10, 10, 70, 70);
rectCxt.fill();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.