9

When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.

fabricjs canvas iamge

But if I add that same image as an <img/> and scale it down, it retains its quality.

html img

Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?

Kara
  • 6,115
  • 16
  • 50
  • 57
bab
  • 2,119
  • 3
  • 28
  • 49
  • I reproduced it here. http://jsfiddle.net/pVE33/1/ – bab Nov 25 '13 at 00:35
  • I can't reproduce this with your fiddle (on Chrome 33) — https://www.dropbox.com/s/qs9t0bww6eg5bop/Screenshot%202013-11-25%2011.35.47.png – kangax Nov 25 '13 at 10:36
  • That's interesting. The images should be the same size. Here's what I see on firefox 25.0 - http://i.imgur.com/QNPMfeC.png – bab Nov 25 '13 at 14:18
  • 2
    They are the same size for me too. I just resized it to show that quality is preserved (you can see it in enlarged view). But if the question is "why does scaled-down image look pixelated", that has to do with canvas rendering of a particular browser. – kangax Nov 25 '13 at 14:30
  • Yes my question is "why does scaled-down image look pixelated?". Is there no way to get the canvas image to retain its high quality like the html does? – bab Nov 25 '13 at 14:38
  • Perhaps take a look at http://stackoverflow.com/a/18765964/130652 – kangax Nov 25 '13 at 14:40
  • Did you test is in multiple browsers? – GRowing Nov 30 '13 at 06:50
  • I can confirm that the image is pixelated when I open the jsfiddle link provided by troq. Using Chrome 33. Have a read here: http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality – Rumplin Mar 08 '14 at 21:46

1 Answers1

3

It should probably go for a comment, but unfortunately I am new here and I can't add comments. However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).

This question might be a duplicate of:

Html5 canvas drawImage: how to apply antialiasing

HTML5 Canvas and Anti-aliasing

Hope it helps.

Community
  • 1
  • 1
user3425836
  • 56
  • 3