drawImageToRect method

void drawImageToRect(
  1. CanvasImageSource source,
  2. Rectangle<num> destRect, {
  3. Rectangle<num>? sourceRect,
})

Draws an image from a CanvasImageSource to an area of this canvas.

The image will be drawn to an area of this canvas defined by destRect. sourceRect defines the region of the source image that is drawn. If sourceRect is not provided, then the entire rectangular image from source will be drawn to this context.

If the image is larger than canvas will allow, the image will be clipped to fit the available space.

CanvasElement canvas = new CanvasElement(width: 600, height: 600);
CanvasRenderingContext2D ctx = canvas.context2D;
ImageElement img = document.query('img');
img.width = 100;
img.height = 100;

// Scale the image to 20x20.
ctx.drawImageToRect(img, new Rectangle(50, 50, 20, 20));

VideoElement video = document.query('video');
video.width = 100;
video.height = 100;
// Take the middle 20x20 pixels from the video and stretch them.
ctx.drawImageToRect(video, new Rectangle(50, 50, 100, 100),
    sourceRect: new Rectangle(40, 40, 20, 20));

// Draw the top 100x20 pixels from the otherCanvas.
CanvasElement otherCanvas = document.query('canvas');
ctx.drawImageToRect(otherCanvas, new Rectangle(0, 0, 100, 20),
    sourceRect: new Rectangle(0, 0, 100, 20));

See also:

Implementation

void drawImageToRect(
  CanvasImageSource source,
  Rectangle destRect, {
  Rectangle? sourceRect,
}) {
  if (sourceRect == null) {
    drawImageScaled(
      source,
      destRect.left,
      destRect.top,
      destRect.width,
      destRect.height,
    );
  } else {
    drawImageScaledFromSource(
      source,
      sourceRect.left,
      sourceRect.top,
      sourceRect.width,
      sourceRect.height,
      destRect.left,
      destRect.top,
      destRect.width,
      destRect.height,
    );
  }
}