Repeated background image for canvas game engine

imagerepeat.js

const cameraXobject = new DOMMatrix().rotate(PI/8)
const inverse = cameraXobject.inverse()
const transformPoint = p => inverse.transformPoint(p)

const pat = ctx.createPattern(img, 'repeat')
ctx.fillStyle = pat
ctx.path = [
  [0,0],
  [ctx.canvas.width,0],
  [0,ctx.canvas.height],
  [ctx.canvas.width,ctx.canvas.height],
].map(transformPoint)
ctx.fill()