CODEWITHSUNDEEP
javascriptcanvashtml5-canvasresizedrawimage
selanac82
selanac82

Reputation: 3000

Canvas drawImage scaling

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.

Upvotes: 71

Views: 100663

Answers (3)

TechMaze
TechMaze

Reputation: 477

And if you want to properly scale the picture as per the screen size, here is the code you can use:

var imgWidth = imageObj.naturalWidth;
var screenWidth  = $(window).width() - 20; 
var scaleX = 1;
if (imageWdith > screenWdith)
  scaleX = screenWidth/imgWidth;
var imgHeight = imageObj.naturalHeight;
var screenHeight = $(window).height() - canvas.offsetTop-10;
var scaleY = 1;
if (imgHeight > screenHeight)
  scaleY = screenHeight/imgHeight;
var scale = scaleY;
if(scaleX < scaleY)
  scale = scaleX;
if(scale < 1){
  imgHeight = imgHeight*scale;
  imgWidth = imgWidth*scale;      
}
canvas.height = imgHeight;
canvas.width = imgWidth;
ctx.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);

If you are not using jQuery, replace $(window).width with the appropriate equivalent option.

Upvotes: 3

Mashhood
Mashhood

Reputation: 403

@TechMaze's solution is quite good.

Here is the code after some corrections and the introduction of the image.onload event. image.onload is essential in order to avoid any kind of distortion.

function draw_canvas_image() {

  var canvas = document.getElementById("image-holder-canvas");
  var context = canvas.getContext("2d");
  var imageObj = document.getElementById("myImageToDisplayOnCanvas");

  imageObj.onload = function() {
    var imgWidth = imageObj.naturalWidth;
    var screenWidth  = canvas.width;
    var scaleX = 1;
    if (imgWidth > screenWidth)
        scaleX = screenWidth/imgWidth;
    var imgHeight = imageObj.naturalHeight;
    var screenHeight = canvas.height;
    var scaleY = 1;
    if (imgHeight > screenHeight)
        scaleY = screenHeight/imgHeight;
    var scale = scaleY;
    if(scaleX < scaleY)
        scale = scaleX;
    if(scale < 1){
        imgHeight = imgHeight*scale;
        imgWidth = imgWidth*scale;          
    }

    canvas.height = imgHeight;
    canvas.width = imgWidth;

    context.drawImage(imageObj, 0, 0, imageObj.naturalWidth, imageObj.naturalHeight, 0,0, imgWidth, imgHeight);
  }
}

Upvotes: 10

Gaurav
Gaurav

Reputation: 12796

context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width)

Upvotes: 118

Related Questions