description

# drawImageScaledFromSource method

1. @JSName('drawImage')

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

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

The image is a region of `source` that is `sourceWidth` wide and `destHeight` 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:

- CanvasImageSource for more information on what data is retrieved from `source`.
- drawImage from the WHATWG.

## Implementation

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