## HTML Canvas drawImage() Method
The `drawImage()` method of the Canvas 2D API provides a highly versatile way to render images, other canvases, or video frames onto a `
` element. It supports basic positioning, scaling, and cropping (slicing).
---
## Browser Support
The `drawImage()` method is fully supported by all modern web browsers:
* Google Chrome
* Mozilla Firefox
* Safari
* Microsoft Edge
* Opera
*Note: Internet Explorer 8 and earlier versions do not support the `` element.*
---
## Definition and Usage
The `drawImage()` method draws an image, canvas, or video onto the canvas.
Depending on the parameters you provide, `drawImage()` can be used in three distinct ways:
1. **Basic Positioning:** Draw the source image at its original size at specified coordinates.
2. **Scaling:** Draw the source image resized to a specified width and height.
3. **Slicing (Cropping):** Crop a specific portion of the source image, scale it, and draw it onto the canvas.
---
## Syntax
The method accepts three different parameter configurations:
### 1. Basic Positioning
Draws the image at its original size at the specified `(x, y)` coordinates.
```javascript
context.drawImage(img, x, y);
```
### 2. Scaling
Draws the image at the specified `(x, y)` coordinates, resized to the specified `width` and `height`.
```javascript
context.drawImage(img, x, y, width, height);
```
### 3. Slicing and Scaling
Crops a sub-rectangle of the source image defined by `(sx, sy, swidth, sheight)` and draws it onto the destination canvas at `(x, y, width, height)`.
```javascript
context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
```
---
## Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `img` | Element | The source element to draw. Can be an `HTMLImageElement`, `HTMLVideoElement`, or `HTMLCanvasElement`. |
| `sx` | Number | *Optional.* The x-coordinate of the upper-left corner of the source image to crop. |
| `sy` | Number | *Optional.* The y-coordinate of the upper-left corner of the source image to crop. |
| `swidth` | Number | *Optional.* The width of the cropped source image. |
| `sheight` | Number | *Optional.* The height of the cropped source image. |
| `x` | Number | The x-coordinate on the destination canvas where the image will be placed. |
| `y` | Number | The y-coordinate on the destination canvas where the image will be placed. |
| `width` | Number | *Optional.* The width to scale the image to on the destination canvas. |
| `height` | Number | *Optional.* The height to scale the image to on the destination canvas. |
---
## Code Examples
### Example 1: Basic Image Drawing
This example draws an image onto the canvas at its original size.
```html
` element to `drawImage()`. By rendering the video frame-by-frame using an interval or requestAnimationFrame, you can display live video on the canvas.
```html
YouTip