HTML 5 Canvas] Image quality when I resize

Question

thank you for taking a look.

What I am trying to do here is... load image from computer (by using FileReader), put img tag's src to the file. Then draw canvas with that image.

function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onload = function () {
       preview.src = reader.result;
       drawCanvas();
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "sample.jpg";
   }
}

previewFile();  //calls the function named previewFile

window.onload = function () {drawCanvas(); };

function drawCanvas() {
var img = document.querySelector("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.filter = window.getComputedStyle(document.querySelector("img")).filter;
ctx.drawImage(img, 0, 0);
}

Problem is when I load another image file. It loads in the canvas, but not fit in the canvas size. It keeps the original image size and "part" of the image is shown in the canvas.

In order to solve it, I tried following: ctx.drawImage(img, 0, 0, document.getElementById('canvas').width,
document.getElementById('canvas').height);

It works, however the image quality becomes really bad... since it is not original image size. It is adjusted to the certain height and forced to be resized.

All I want to do is... keep the original canvas size (width: some px; height: auto), so when I load the image, it fits to the canvas width and adjusted height.

Would you please help me? Thank you.

Added

I researched myself and found following: I came up with an idea - change the image size first based on the current width of the canvas.

var img = document.querySelector("img");
var canvas = document.getElementById("image");

var ratio = img.height / img.width;
img.width = canvas.offsetWidth;
img.height = img.width * ratio;

Then draw with the edited image.

var ctx = canvas.getContext('2d');
ctx.filter = window.getComputedStyle(img).filter;
ctx.drawImage(img, 0, 0, img.width, img.height);

Then I found the problem. I checked "img.height" variable is 199px. But canvas's height becomes 150px somehow. I checked and there is no css applied to the canvas at all.

So this time, I set canvas width, before drawImage().

ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.filter = window.getComputedStyle(img).filter;
ctx.drawImage(img, 0, 0);

And again, the original image coming back... and "part" of the image is shown in the canvas. The canvas's size is what I wanted though...

Possible duplicate of Canvas is stretched when using CSS but normal with "width" / "height" properties — Kaiido
Please try to create a working demo (currently it misses some important parts like your HTML and CSS). — Kaiido

ryan ryan · Accepted Answer · 2017-02-08T05:48:43

Thank you so much for taking a look the issue. Especially @Kaiido who tried to help. Thank you. I am really new to this stackoverflow... so I didn't know how to create demo.

I found the solution. Well... it was really basic knowledge of the Canvas,,, but I think many people will forget / miss following:

var ctx = canvas.getContext('2d');
ctx.canvas.width = 1000;
ctx.canvas.height = 1000;
ctx.drawImage(img, 0, 0, 800, 800);

ctx.canvas.width is canvas's width. ctx.canvas.height is canvas's height. In drawImage, those 800s are width and height of the image will be drawn, not the canvas's size!! So if you set... let's say 1000, 1000 in drawImage, the image will be resized to the size and it will be drawn into the canvas. If it is bigger than the canvas size, it will show only "part" of your image.

So what I did was... get the div width size where I want to put my canvas. Then calculate the ratio of the image first ( ratio = image's height / image's width ). Then set canvas size to following ( ctx.canvas.width = div width size, ctx.canvas.height = div width size * ratio ). Then draw canvas with canva's width and height ( ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height) ).

Hope this helps someone new like me :) Thank you.

HTML 5 Canvas] Image quality when I resize

1 Answers