pattern

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

const img = new Image()

img.onload = () => {
  const pattern = $.createPattern(img, 'repeat')
  $.rect(0, 0, canvas.width, canvas.height)
  $.fillStyle = pattern
  $.fill()
}

img.src = 'https://harryheman.github.io/pattern.png'