Image being clipped when copied to HTML canvas using drawImage

Question

I am writing a small snippet that allows a user to drag an image into a div container (dropzone) and then creates a canvas in that div and paints the image into the div. But

Answer 1

You are not specifying the size of the Canvas element anywhere (at least not in the code shown here).

If size for canvas isn't specified it will default to 300 x 150 pixels.

You can update the canvas' size at anytime so here it might be a good idea to do the following if size of image is unknown:

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
};

Not specifying size when using drawImage will use the original size of the image so here it's not necessary as here we 'll know the canvas will be as big as the image.

Answer 2

I have canvas width and heihgt set to 100% in css setting so:

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

in page load event do the trick