Drawing image on canvas - larger than real

Question

I want to draw an image from jpg file on canvas. My code:

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0);
  };
  imageObj.src = 'img/my_image.jpg';

The problem is that the image on canvas is much bigger than in file. Why? How can I draw image real size?

UPDATE: result: http://jsfiddle.net/AJK2t/

Threesquare

Answer 1

This is your problem:

<canvas style="width: 700px; height: 400px;" id="konf"></canvas>

You are setting the visual size of your canvas, but not the number of pixels. Consequently the browser is scaling the canvas pixels up.

The simplest fix is:

<canvas width="700" height="400" id="konf"></canvas>

The width and height parameters control the number of pixels in the canvas. With no CSS styling, the default visual size of the canvas will also be this size, resulting in one canvas pixel per screen pixel (assuming you have not zoomed the web browser).

Copy/pasting from my answer to a related question:

Think about what happens if you have a JPG that is 32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:

• The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
  "the width attribute defaults to 300, and the height attribute defaults to 150."

• The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.

If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/

Alejandroalejo

Answer 2

Working Example: http://jsfiddle.net/jzF5R/

In order to scale an image you need to provide the scaled width and height you want to ctx.drawImage():

// x, y, width, height
ctx.drawImage(imageObj, 0, 0, 100, 50);

Maintain original image size:

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

Keep canvas from overflowing off the page:

ctx.canvas.width = document.body.clientWidth;

You can easily scale the image width and height to 70% of original:

ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.7, imageObj.height * 0.7);

Lati

...and if you're scaling, you probably want to scale proportionally to the image width/height so you don't squish the image ;) – Signature

ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); is not work for me. check: jsfiddle.net/AJK2t – Threesquare

@Alex W: I was sure you knew...just wanted OP to know too :) – Signature

Your suggestion will reduce the scale of the image but OP is going to loose pixels by doing that. Correct answer is the accepted one. – Alectryomancy

i'm not sure why, but when I try this, the canvas image has a file size larger than the original.. no matter what i've tried.. the only way to get it smaller than the original image size.. i lose so much detail its horrible... – Deloisedelong

Answer 3

To display a MJPEG stream on a canvas (or something else) without define the width and the height of the canvas in HTML, so only using CSS to get a responsive canvas and fit with the page, I use that:

//get size from CSS
var sizeWidth = context.canvas.clientWidth;   
var sizeHeight = context.canvas.clientHeight;   
//here the solution, it replaces HTML width="" height=""
canvas.width = sizeWidth;
canvas.height = sizeHeight;
...........
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, sizeWidth, sizeHeight);

The picture is entirely contained in the canvas whatever the size of the canvas (the rate between height and width is not kept but it doesn't matter, an height:auto; in css can fix that).

Et voilà !

Homology