Fill Rectangles

A canvas starts empty, then two fillRect calls paint a teal panel and an amber badge.

Program

Canvas drawing is immediate. When JavaScript calls fillRect, pixels are painted into the bitmap and stay there until changed.

fill_rectangles.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  ctx.fillStyle = "#0f766e";
  ctx.fillRect(36, 36, 150, 92);
  ctx.fillStyle = "#f59e0b";
  ctx.fillRect(206, 82, 92, 58);
</script>

fillStyle fillStyle is the current fill paint used by filled shapes and text.

fillRect fillRect paints a filled rectangle into the canvas bitmap immediately.