HTML5: canvas and image size

Question

I want to draw an image on canvas using JS. This is my html code:

<canvas style="width:1000px;height:600px;border:1px solid black;" id="canvas"> </canvas>

This is my js code:

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img, 0, 0,1000,600)
    }
    img.src = someUrlToJpgImage;

This is the origin jpg image (1000x600) which is located on server:

This is the result (1000x600) I see in browser:

As you see this is scaled the top left corner of the image but not the whole image as expected. I tried to add to js code:

ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

but it didn't help.

How to solve this problem?

Answer 1

You should set the amount of pixels desired on the canvas element:

<canvas style="width:1000px;height:600px;border:1px solid black;" height="600" width="1000" id="canvas"> </canvas>