6

I have a simple HTML document with an image and a canvas element. The image src is just some high quality image found online, just to illustrate my point. When I try to draw the image onto the canvas, the resulting canvas image is very pixelated and low quality. I can't seem to figure out why. Similar questions have been asked here, but I couldn't find an answer that seemed to solve the problem. If someone finds another post with a working answer, please let me know. Any help is greatly appreciated. Thanks in advance!

Here is the JSfiddle with the code: https://jsfiddle.net/vey309b0/5/

HTML:

<p>the original image:</p>
<img id="img_cam" src="https://4.bp.blogspot.com/k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400">
<p>the canvas with drawn image:</p>
<canvas id="imgcanvas" width="400"></canvas>

JavaScript:

var canvas = document.getElementById("imgcanvas");
var img_can = document.getElementById("img_cam");
var ctx = canvas.getContext("2d");
var imgWidth = img_can.width;
var imgHeight = img_can.height;
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img_can, 0, 0, imgWidth, imgHeight);
gman
  • 100,619
  • 31
  • 269
  • 393
David Coco
  • 63
  • 1
  • 7
  • Because the actual image dimensions are 3,840px × 2,160px and you are distorting it to a width of 400px take a look at this post: https://stackoverflow.com/a/17862644/2311317 – pokeybit Jul 19 '17 at 18:22
  • so I should reduce it in steps by creating multiple canvas elements, each with a size say 1/2 of the previous? – David Coco Jul 19 '17 at 18:25
  • Correctimondo, or edit the image in an editor and reduce it before use. – pokeybit Jul 19 '17 at 18:27
  • https://github.com/nodeca/pica – Prinzhorn Jul 19 '17 at 18:27
  • thanks for all the help! May I ask, if I am putting an image into the tag with such a high resolution, and then reducing it to a width of 400px, why is the image showing up in high resolution, and the canvas element is not? Am I not reducing both of them in the same way. Wouldn't the image element undergo the same distortion as the canvas element? – David Coco Jul 19 '17 at 18:36
  • The browser does it own thing with the image in the image tag, canvas is allowing you full control and is awaiting your instructions :) – pokeybit Jul 19 '17 at 18:54

1 Answers1

8

Set the width and the height of the canvas to the naturalWidth and naturalHeight of the image, and then use CSS to constrain the canvas size.

var canvas = document.getElementById("imgcanvas");
var ctx = canvas.getContext("2d");
var img_can = document.getElementById("img_cam");
img_can.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
};
img_can.src = img_can.getAttribute('data-src');
<p>
the original image:
</p>
<img id="img_cam" data-src="https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400">
<p>
the canvas with drawn image:
</p>
<canvas id="imgcanvas" style="width:400px;"></canvas>

You should also really be doing this work in an onload listener on the img tag.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100