Pattern From Offscreen

A small offscreen canvas paints a two-square tile, createPattern wraps the tile as repeating paint, and fillRect tiles the pattern across a banner region.

Program

A pattern is a reusable paint built from another canvas. The source tile lives offscreen so only the final fillRect changes pixels on the visible canvas.

pattern_from_offscreen.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const ctx = stage.getContext("2d");
  const tile = document.createElement("canvas");
  tile.width = 20;
  tile.height = 20;
  const tctx = tile.getContext("2d");
  tctx.fillStyle = "#1d4ed8";
  tctx.fillRect(0, 0, 10, 10);
  tctx.fillRect(10, 10, 10, 10);
  const pattern = ctx.createPattern(tile, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(40, 40, 280, 130);
</script>

offscreen canvas A canvas element does not need to be in the DOM to act as a drawing surface.

createPattern createPattern wraps a source canvas or image as a reusable repeating paint.