How to apply scale and rotation to image in Offscreen rendering?

[jeremiahlachica]

Using this example from:
#1359 (comment)

const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
const canvas = offscreen.getCanvas();
canvas.drawImage(....) // draw your image

// Draw
offscreen.flush();
// Get the image
offscreen.makeImageSnapshot()

drawImage() only accepts: image, left, top, paint params.
Is there a way to apply scale and rotation?

[jeremiahlachica]

I've solved it. Not sure if this is the recommended/right way but it works based on what I need.

canvas.save(); // If I correctly understand, this creates new stack. No documentation though. I went through the codes to know more about it
canvas.concat(skMatrix); // since I have the matrix (which has the x, y, skewX, skewY, scaleX, scaleY) data I pass the value here
canvas.drawImage(skImage, 0, 0);
canvas.restore();

[pep108]

I'm working on a simlar problem and found the following for working with skMatrix manipulation.

const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
const canvas = offscreen.getCanvas();

const skMatrix = Skia.Matrix()

// apply transformations
skMatrix.scale(value, value)  // scale
skMatrix.translate(value, 0)  // translateX
skMatrix.translate(0, value)  // translateY
skMatrix.skew(value, 0)       // skewX
skMatrix.skew(value, 0)       // skewX
skMatrix.rotate(value)        // rotate


canvas.save()
canvas.concat(skMatrix)
canvas.drawImage(skImage, 0, 0, ctx.width, ctx.height)
canvas.restore()

offscreen.flush();
offscreen.makeImageSnapshot()