Scaling an image to fit on canvas

by

You made the error, for the second call, to set the size of source to the size of the target.
Anyway i bet that you want the same aspect ratio for the scaled image, so you need to compute it : 

var hRatio = canvas.width / img.width    ;
var vRatio = canvas.height / img.height  ;
var ratio  = Math.min ( hRatio, vRatio );
ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);

i also suppose you want to center the image, so the code would be : 

function drawImageScaled(img, ctx) {
   var canvas = ctx.canvas ;
   var hRatio = canvas.width  / img.width    ;
   var vRatio =  canvas.height / img.height  ;
   var ratio  = Math.min ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - img.height*ratio ) / 2;  
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(img, 0,0, img.width, img.height,
                      centerShift_x,centerShift_y,img.width*ratio, img.height*ratio);  
}

you can see it in a jsbin here :
http://jsbin.com/funewofu/1/edit?js,output

More Related Contents:

  1. How to clear the canvas for redrawing
  2. HTML5 Canvas Resize (Downscale) Image High Quality?
  3. Resize image with javascript canvas (smoothly)
  4. HTML5 Canvas camera/viewport – how to actually do it?
  5. Capture frames from video with HTML5 and JavaScript
  6. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  7. addEventListener for keydown on Canvas
  8. Load image from url and draw to HTML5 Canvas
  9. Save canvas as jpg to desktop [duplicate]
  10. HTML canvas – drawing disappear on resizing
  11. canvas getContext(“2d”) returns null
  12. clearing circular regions from HTML5 Canvas
  13. How to detect shape on a transparent canvas?
  14. HTML5 Canvas API – formatting individual words with italics
  15. True Isometric Projection with HTML5 Canvas
  16. HTML5 Canvas toDataURL returns blank
  17. How to draw an inline svg (in DOM) to a canvas?
  18. Convert SVG to PNG with applied images as background to svg elements
  19. Best way to detect that HTML5 is not supported
  20. Web Workers and Canvas
  21. JavaScript: getting ImageData without canvas
  22. jQuery equivalent of getting the context of a Canvas
  23. make canvas as wide and as high as parent
  24. How to pixelate an image with canvas and javascript
  25. HTML5 responsive canvas: resizing the browser canvas draw disappear
  26. Is there a way to curve / arc text using CSS3 / Canvas
  27. dotted stroke in
  28. Canvas text rendering (blurry)
  29. How to embed an input or textarea in a canvas element?
  30. HTML Canvas Full Screen

Leave a Comment