drawImageScaledFromSource method

void drawImageScaledFromSource(
  1. CanvasImageSource source,
  2. num sourceX,
  3. num sourceY,
  4. num sourceWidth,
  5. num sourceHeight,
  6. num destX,
  7. num destY,
  8. num destWidth,
  9. num destHeight,
)

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

The image is a region of source that is sourceWidth wide and sourceHeight tall with top left corner at (sourceX, sourceY). The image will be drawn to this context with its top left corner at the point (destX, destY) and will be scaled to be destWidth wide and destHeight tall.

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

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

// Draw the top 100x20 pixels from the otherCanvas to this one.
CanvasElement otherCanvas = document.query('canvas');
ctx.drawImageScaledFromSource(otherCanvas, 0, 0, 100, 20, 0, 0, 100, 20);

See also:

Implementation

@JSName('drawImage')
void drawImageScaledFromSource(
    CanvasImageSource source,
    num sourceX,
    num sourceY,
    num sourceWidth,
    num sourceHeight,
    num destX,
    num destY,
    num destWidth,
    num destHeight) native;