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.

Eg 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!

Answer 1

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'/>

Answer 2

 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.. :)

Answer 3

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';

Answer 4

ADD CSS

#my_canvas{
  width:100%;
}