1

I have a canvas with a loaded image on top of it. The canvas has static widkth and height (800x600). The image can be smaller or larger. If the image is smaller than the size of canvas, it is placed on the middle using the following code

x = (canvas.width - image.width)/2;
y = (canvas.height - image.height) / 2;
ctx.drawImage(image, x, y)

I want to replace now the old canvas with a new one that has the image scaled accoring to a ratio. My code is the following(for testing purposes i render the image on the top left corner of the canvas, not yet implemented exact position)

oldCanvas = document.getElementById('myCanvas');
newCanvas = document.createElement('canvas');
ctx = newCanvas.getContext('2d');
x = y = 0;
newImageWidth = image.width * 2;
newImageHeight = image.height * 2;
ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas)

But the canvas stays the same as the old. I tried doing the same witout scaling the image but changing the size of newCanvas and worked.What am I doing wrong in here?

EDIT: It works if i chnage drawImage to get the original image as parameter

ctx.drawImage(image, 0, 0, newImageWidth, newImageHeight);

But I want to use the old canvas because the image migth be edited e.g changed the brightness. Isn't the same to use a canvas element instead of an Image Element on canvas?

EDIT2: In order to comply with stack's overflow policy, I am asking here: Is there a difference between calling drawImage with image as parameter and with canvas as parameter?

1 Answer 1

1

Yes, you can use either an image element or an existing canvas as the image source for drawImage.

Your glitch is that you're using the version of drawImage that clips, not scales:

// this clips newImageWidth X newImageHeight pixels from oldCanvas at x,y 

ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);

Instead, use the scaling version of drawImage:

ctx.drawImage(oldCanvas,                    // use the old canvas as an image source
    0,0, oldCanvas.width,oldCanvas.height,  // use entire old canvas 
    x,y, newImageWidth, newImageHeight);    // scale that old canvas to the new size
3
  • Thanks for answering. Not being able to test right now..Will test it and get back to you
    – Apostolos
    Mar 25, 2014 at 14:51
  • It won't work like you describe. I have an image 460x288 in the middle of a 800x600 canvas. I do this for testing: ctx.drawImage(oldCanvas, 0,0 oldCanvas.width, oldCanvas.height, 0, 0, 800, 600). It should rescale the image to fit the whole canvas, but it doesn't. It just won't do anything. It gives me the initial image.If I use newImageHeight and width (larger than 460 and 288) the image appears smaller
    – Apostolos
    Mar 26, 2014 at 7:10
  • BTW goo.gl/1mrTB3 this article here states that this method of drawImage with 9 parameters is for cropping while the other with 5 is for scaling.
    – Apostolos
    Mar 26, 2014 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.