Question

I’m using fill() while drawing this image in my canvas. I load the image using the code below:

var cerceve = new Image();
if ($(".cerceve.accessory-selected").length) {
    cerceve.onload = function () {
        cerceveDeferred.resolve();
    };
    cerceve.src = $(".cerceve.accessory-selected:first img").attr("src");

Basically, I define the src of the Image object then when it loads I start drawing it on the screen. But I want the image to load in custom sizes, how can I do that? I cannot use resizing with drawImage(), because I need to use fill() method and it does not specify any resizing options.

For example, if I set cerceve.height = 40; after cerceve loads, it draws the image with a height of 40 (40 is bigger than the original height), but the source image is not stretched, instead it repeats, draws many of the same image. I give it a custom height and the image behaves with repeat option. I want it to stretch.

Answer 1

Ok I got it. Instead of trying to resize the source image after it loads, you should use context scaling while drawing the image on the canvas. context.scale(x,y); is probably the way to go.