Pixels and Image Data

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
Visuals: captured from real browser rendering
<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>

  1. Paint the two-square tile on an offscreen canvas.

    The visible canvas is blank because the tile only paints onto the offscreen helper canvas.
    The tile is a regular canvas that nobody adds to the DOM; only its pixels matter.

  2. Wrap the tile as a repeating pattern.

    The visible canvas does not change while the pattern object is created.
    createPattern returns a reusable paint; nothing is drawn yet.

  3. Fill a banner with the pattern.

    A blue checkerboard banner tiles across the middle of the canvas.
    fillRect uses the pattern as paint, so the tile repeats across the rectangle.
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.