Canvas drawImage scaling

javascript canvas html5-canvas resize drawimage
selanac82 picture selanac82 · May 31, 2012 · Viewed 67.6k times · Source

I'm trying to scale an image proportionately to the canvas. I'm able to scale it with fixed width and height as so:

context.drawImage(imageObj, 0, 0, 100, 100)

But I only want to resize the width and have the height resize proportionately. Something like the following:

context.drawImage(imageObj, 0, 0, 100, auto)

I've looked everywhere I can think of and haven't seen if this is possible.

Answer

Gaurav picture Gaurav · Jun 1, 2012 
context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

Related questions

Resize a Base-64 image in JavaScript without using canvas

I need a way to resize pictures in JavaScript without using a HTML element. My mobile HTML app captures photos and then converts them to base64 strings. Thereafter I need to resize them before they are sent to the API …

Read More
How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Resize image with javascript canvas (smoothly)

I'm trying to resize some images with canvas but I'm clueless on how to smoothen them. On photoshop, browsers etc.. there are a few algorithms they use (e.g. bicubic, bilinear) but I don't know if these are built into …

Read More