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

<!--Try adding width="200" to the img tag below. 
    You'll see that the original image (left on 
    the output) is resized accordingly, but the 
    drawImage rendering is not. If you console.log 
    imgs.width, it's set to 200, but the 
    result is unchanged.
-->
<img src="https://i.imgur.com/mbXJe0f.png" width="200">

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();
testImage.src = imgs.src;
testImage.width = imgs.width;
testImage.height = imgs.height;
testImage.onload = function() {
    square = 100;
    context.drawImage(this,150,70,square,square,0,0,square,square);
}   

In that demo, if you set the width attribute on the sole img tag, you'll see that the image on the left changes (the original), but the image on the right does not (the drawImage render).

I get that I'm setting testImage.src to the original src, but I'm also setting the width and height, which are adjusted if you open up the developer console log.

Why is this? Can I adjust that code so that it does adjust accordingly?

The expected result here would be for the drawImage render to show a larger area of the picture. It's easy to tell that it's not resizing - the 'infinity' symbols are different sizes where they should be the same.

Answer 1

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.

Answer 2

The width and height attributes of an image object are used only by the rendering engine of the browser when you place the object in the DOM.

In the drawImage call you can specify the target position (no scaling will be done), the target rectangle (scaling will be done) or both target and source rectangles (scaling will be done).

When using drawImage the .width and .height attributes of the image are irrelevant.

You can use however .width and .height after loading the image to detect what is the original size but changing them will affect only how rendering of that object is done in the DOM.