description

# drawImageToRect method Null safety

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:

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

## 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);
      }
    }