Implement pattern.setTransform()

[ritwickdey]

const pattern = context.createPattern(image, 'repeat');
pattern.setTransform() // `setTransform` is undefined.
// etc.

I checked the type definition, setTransform function is there.

Few questions.

1. Is this issue of type def file ?
2. if yes, then how I can set patternTransform attribute into the pattern ?

[BTW, the code is working. But I need to add the patternTransform property ]

[zbjornson]

pattern.setTransform shows up in the type definitions because we borrow the definitions from native HTMLCanvas/pattern/etc. node-canvas doesn't support that method yet unfortunately. I'll update the title to reflect that.

[asturur]

if we know how it should behave i can implement it.
I wonder if there is a clear explanation somewhere

[aihornmac]

@asturur I believe the behavior is defined here

[samizdatco]

I made an attempt at adding this in #1623 and to my eye it seems to be working pretty well at this point:

function makeCheckerboard(w, h){
  let check = createCanvas(w, h),
      ctx = check.getContext('2d'),
      bmp = ctx.createImageData(w, h);
  for (let x=0; x<w; x++) for (let y=0; y<h; y++){
    let i = y*4*w + x*4,
        clr = (x<w/2 && y<h/2 || x>=w/2 && y>=h/2) ? 255 : 0
    bmp.data.set([clr,clr,clr,255], i)
  }
  ctx.putImageData(bmp, 0, 0)
  return check
}

let quad = 400,
    checker = makeCheckerboard(quad/4, quad/4),
    canvas = createCanvas(2*quad, 2*quad),
    ctx = canvas.getContext('2d'),
    pat = ctx.createPattern(checker, 'repeat'),
    mat = new DOMMatrix();

ctx.fillStyle = pat
ctx.fillRect(0, 0, quad, quad)

mat = mat.scale(.5).rotate(15)
pat.setTransform(mat)
ctx.fillRect(quad, 0, quad, quad)

mat = mat.scale(.5).rotate(15)
pat.setTransform(mat)
ctx.fillRect(0, quad, quad, quad)

mat = mat.scale(.5).rotate(15)
pat.setTransform(mat)
ctx.fillRect(quad, quad, quad, quad)