Question

See http://jsfiddle.net/jdb1991/6sxke/

I’ve got a canvas element that doesn’t know what it’s going to be used for until an image has loaded, so I need to be able to change the dimensions of the element on the fly, after creating the image object.

Something is going wrong though, as it seems to be running the commands asynchronously; writing the image to the context before the resize occurs.

Answer 1

use:

function objectifyImage(i) {
    var img_obj = new Image();
    img_obj.src = i;
    return img_obj;
}

var canvas = document.getElementById('display');
var context = canvas.getContext('2d');
i = objectifyImage('https://www.google.co.uk/images/srpr/logo3w.png');
i.onload = function() {
    canvas.width = i.width;
    canvas.height = i.height;

    context.drawImage(i, 0, 0);
};
​

demo: http://jsfiddle.net/ycjCe/1/

---

The element can be sized arbitrarily by CSS, but during rendering the
image is scaled to fit its layout size. (If your renderings seem
distorted, try specifying your width and height attributes explicitly
in the attributes, and not with CSS.)

source: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_usage