0

Certain images are blurry when drawing them onto an HTML5 canvas.

The example below draws two images using context.drawImage(). One of the images is blurry whereas the other looks as expected.

blurry image

Javascript code to draw the image onto the canvas - jsfiddle

function drawImage(canvasId, imageId) {
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext("2d");
  var img = document.getElementById(imageId);

  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0, img.width, img.height);
}

// draw blurry example
drawImage('canvas1', 'img1');

// draw non blurry example
drawImage('canvas2', 'img2');

Any help would be appreciated. Thanks.

Adam Hickey
  • 41
  • 5
  • One image is 2969×2105, the other is 100×76. – gre_gor Feb 16 '22 at 21:49
  • You are right. The rainbow image is smaller and won't face the downsampling issues as the larger image. I will read through that answer and get back to you. – Adam Hickey Feb 17 '22 at 01:15
  • I pasted my image into the downsampling answer - http://jsfiddle.net/adamhickey00/wte7cu0k/1/ It still looks blurry using the accepted answer from that question. It does look a little better than my original in comparison. – Adam Hickey Feb 17 '22 at 01:19
  • I ended up using this library to resize the image with high quality - https://github.com/nodeca/pica – Adam Hickey Feb 18 '22 at 00:52

0 Answers0