Uploaded image fill canvas Javascript

Question

I'm want to make the uploaded image to fill the size of the canvas, by setting the canvas size to the size of the image. The canvas size is set correctly but the image becomes smaller, and doesn't fill the canvas. How can I make the image fill the canvas? here's what I've tried so far.

<canvas id="canvas" style="border: 1px solid #000; width: 400px; height: 300px"></canvas>
<input type="file" name="photo" id="image" accept="image/*">

JS

var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var canvasWidth = 400;
var canvasHeight = 300;

if (image) {
    image.addEventListener('change', function () {
        var context = canvas.getContext('2d');
        if (this.files && this.files[0]) {
            var fr = new FileReader();
            fr.onload = function (ev) {
                var img = new Image();
                img.onload = function () {
                    canvasWidth = img.width;
                    canvasHeight = img.height;
                    canvas.style.width = canvasWidth + 'px';
                    canvas.style.height = canvasHeight + 'px';
                    context.drawImage(img, 0, 0);
                };
                img.src = ev.target.result;
            };
            fr.readAsDataURL(this.files[0]);
        }
    }, false);
}

"_How can I make the image fill the canvas?_" - Then why you're changing the size of the canvas to match the size of the image? — Andreas, Oct 22 '16 at 07:51
Which is overwritten in the `onload` event with the dimension of the image. — Andreas, Oct 22 '16 at 07:56
See [this answer](http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties?noredirect=1&lq=1). I think it's likely due to the problem because you are using CSS height/width and you will want to use attribute height/width instead. Bascially the attribute height/width is the dimensions of the canvas based on pixels, although in CSS is will stretch the canvas but keep the same dimensions in pixels as the attribute width/height. — Spencer Wieczorek, Oct 22 '16 at 07:58

score 0 · Accepted Answer · answered Oct 22 '16 at 08:05

           var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var canvasWidth = 400;
var canvasHeight = 300;

if (image) {
image.addEventListener('change', function () {
var context = canvas.getContext('2d');
if (this.files && this.files[0]) {
var fr = new FileReader();
fr.onload = function (ev) {
var img = new Image();
img.onload = function () {
canvasWidth = img.naturalWidth;
canvasHeight = img.naturalHeight;
canvas.width = canvasWidth;
canvas.height = canvasHeight;
context.drawImage(img, 0, 0, canvasWidth, canvasHeight);
};
img.src = ev.target.result;
};
fr.readAsDataURL(this.files[0]);
}
 }, false);}

here is you html code

<canvas id="canvas" width="400" height="300" style="border:1px solid red"></canvas>
<input type="file" name="photo" id="image" accept="image/*">

Uploaded image fill canvas Javascript

1 Answers1