Display the Full Image Size (100% Width/Height) inside a HTML5 Canvas of a certain Width/Height using JavaScript, maybe CSS

Question

How do you make an image appear within an HTML5 Canvas of a certain height and width but have the image appear at 100% size? In other words, keep the image's aspect ratio size intact.

Tree image = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'

I want this image of the above tree to be at 100% size within something you can scroll.

E.g. like the "overflow: scroll" option shown in blue. http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow

The image must be use be sourced in Javascript.

Javascript:

var canvas = document.getElementById('my_canvas'); 
var ctx = canvas.getContext('2d'); 
var imageObj = new Image(); 
ctx.canvas.width = 100; ctx.canvas.height = 100; 
imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0,100,100); 
}; 
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';

Html

<canvas id="my_canvas"></canvas>

Here's a JSFIDDLE but the image is of Google. As you can see it is clearly resized/crunched. Instead I want the full size image to be seen there and some sort of scroll option.

http://jsfiddle.net/jzF5R/

Thanks!

[`ctx.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight)`](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage) with these parameters, you can resize and crop your image as you wish. If you really want a scrollbar : http://stackoverflow.com/a/36233727/3702797 To keep aspect ratio : http://stackoverflow.com/a/34429774/3702797. Good luck. — Kaiido, Mar 28 '16 at 07:26
http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5?rq=1 — , Mar 28 '16 at 08:40
Do you mean like CSS background "cover"? Check if this is what you want: http://stackoverflow.com/questions/21961839/simulation-background-size-cover-in-canvas/21961894#21961894 — , Apr 05 '16 at 02:16

Zamboney · Answer 1 · 2016-03-28T09:19:04.553

by getting the width and height of the img, after the image loaded and then set the canvas.width and canvas.height to it you can set the right size of the canvas

after this you need to draw the image on the canvas on the right perspective, this done be setting the imageObj then set the left top corner to 0,0 and the right bottom corner to the width,height of the image

you can read more about it int this link

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = document.getElementById('img');
  imageObj.onload = function(e) {
  ctx.canvas.width = imageObj.width;
  ctx.canvas.height = imageObj.height;
  
    ctx.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
    
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

canvas{
  width:100%;
  height:100%;
  position:absolute;

}

  <canvas id="my_canvas"></canvas>
  <img style='display:none;'id='img'/>

Deepraj Kanulkar · Accepted Answer · 2016-03-28T08:43:46.493

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

<canvas id="my_canvas" style="border:2px solid;"></canvas>

  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  alert(window.innerWidth+"X"+window.innerHeight);
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,window.innerWidth,window.innerHeight);
  };
  imageObj.src = 'https://www.google.com/images/srpr/logo4w.png';

this may help.. :)

Al3x_M · Answer 3 · 2017-04-16T12:24:09.800

It is because there is a difference between the real width of your canvas and the width of your box.

So, if you do this, that should work :).

var canvas = document.getElementById('my_canvas'); 

// What you have to add:
// You can choose clientWidth, offsetWidth... that depends on what you want.
canvas.width = canvas.offsetWidth;

var ctx = canvas.getContext('2d'); 
var imageObj = new Image();
imageObj.onload = function() { 
    ctx.drawImage(imageObj, 0, 0,100,100); 
}; 
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';

score -2 · Answer 4 · answered Mar 28 '16 at 08:03

-2

ADD CSS

#my_canvas{
  width:100%;
}

answered Mar 28 '16 at 08:03

Balvant Ahir

610
1
9
16

Could you update your answer and include a full working example, for example by editing the provided JSFiddle? – Frank van Wijk Mar 28 '16 at 08:20

Display the Full Image Size (100% Width/Height) inside a HTML5 Canvas of a certain Width/Height using JavaScript, maybe CSS

4 Answers4