HTML5 Canvas - drawImage from a HTML resized image

Question

How come a simple drawImage() call will not adjust when the `width` or `height` attribute have been set in the `img` tag in the HTML? Here's a jsfiddle demo to show what I mean. HTML ```

``` JavaScript ``` imgs = document.getElementsByTagName('img')[0]; //I set EVERYTHING I know about to the proper values, just to see what happens var canvas = document.createElement('canvas'); document.body.appendChild(canvas); var context = canvas.getContext('2d'); style = ''; style += 'width:'+imgs.width+'px;'; style += 'height:'+imgs.height+'px;'; canvas.setAttribute('style',style); canvas.width = imgs.width; canvas.height = imgs.height; console.log(imgs.width,imgs.height); var testImage = new Image();…

Accepted Answer

You cannot change the size of the original image. You can only re-size it using CSS which result it becoming scaled - but the original size will be the original size so changing the image's properties for width and height won't work (to scale it you could use img.style.width and img.style.height, but this doesn't affect the data itself, only the rendering of it to the browser window).

For canvas and drawing a larger image smaller you must set the new size on destination not at source.

Modified fiddle: http://jsfiddle.net/L3495/4/

(in your image onload event):

```
context.drawImage(this, 0, 0, this.width, this.height,
                        0, 0, newWidth, newHeight);
```

Here you draw with source the same same as the original image. Source here tells canvas to use the whole image.

Then you draw it to destination with the size you want.

In the fiddle you see I set the canvas half size of the original image for demo. This will be the size the image is drawn at for the destination values.

HTML5 Canvas - drawImage from a HTML resized image

Solution

Problem