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?

8
  • I reproduced it here. jsfiddle.net/pVE33/1
    – bab
    Nov 25, 2013 at 0:35
  • I can't reproduce this with your fiddle (on Chrome 33) — dropbox.com/s/qs9t0bww6eg5bop/…
    – kangax
    Nov 25, 2013 at 10:36
  • That's interesting. The images should be the same size. Here's what I see on firefox 25.0 - i.imgur.com/QNPMfeC.png
    – bab
    Nov 25, 2013 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, 2013 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 <img/> does?
    – bab
    Nov 25, 2013 at 14:38

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.