How to properly draw offscreen images?

[Glazzes]

Hi there, my use case goes as follows: I need to ask the user for an image on their device, once the image has been loaded I should read its pixels and create a color pallete based on the image colors, however I want to render this image as a 100x100 image in an offscreen surface, so there are way less pixels to read than if it was completely scaled, with that said these are my problems:

I have the following code:

const size = 100;
const offscreen = Skia.Surface.MakeOffscreen(size, size)!;
const canvas = offscreen?.getCanvas();
canvas?.drawImage(image, 0, 0);
offscreen.flush();

I can't seem to find a way to tell the canvas which width and height this image must have, neither a way to tell it wat fit mode to use, if the image is let's say 1000x1000 and the canvas is 200x200 only the top left part of the image will rendered, for instance this is the image I pass to the offscreen API

And this what I get when I save such image to the disk.

I would expect the image to be fully rendered in that 100x100 pixel space, How can I set the proper width and height? As well as to make sure the image is not blurry? Becuase the result is always blurry.

Thanks for your time and dedication to this community.

[NikitaDudin]

  const size = 100;
  const offscreen = Skia.Surface.MakeOffscreen(size, size)!;
  const canvas = offscreen?.getCanvas();
  const paint = Skia.Paint();
  canvas.drawImageRectOptions(
    image,
    rect(0, 0, image.width(), image.height()),
    rect(0, 0, size, size),
    FilterMode.Linear,
    MipmapMode.Linear,
    paint,
  );
  offscreen.flush();

[Glazzes]

Thanks, that's exactly what I was looking for!