Currently, I am facing an issue with loading images into a canvas element as the image seems to be scaled in some way.
To provide some context, I have multiple canvases on my webpage and I want to load images into them. Since the dimensions of the canvas depend on the screen size, I am uncertain about how to handle this. Therefore, I create a div and canvas, use CSS to set the size accordingly, and then print an image onto the canvas. There are additional tasks related to manipulating the image based on ratio such as centering it vertically or horizontally, but these are not the main concern right now. The main problem is that the image appears "zoomed in".
For example, here is the relevant JavaScript code:
$("canvas").each(function() {
var context = $(this)[0].getContext('2d');
var img = new Image;
img.src = 'http://i67.tinypic.com/n38zdv.jpg';
$(img).load(function() {
context.drawImage(this, 0, 0);
});
//img will print 400 (correct, thats the width of the img)
//canvas will print based on the screen size (correct)
//img displayed in the canvas shows 300px out of 400px, it's zoomed (not correct)
$(this).parent().append(
'img width: '+img.width+
', canvas width: '+$(this).width());
});
You can view the complete example with HTML and CSS here.
I am currently testing this on Mac, and both Safari and Chrome exhibit the same zoom issue.
Your assistance with resolving this matter would be greatly appreciated. Thank you!