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.
But if I add that same image as an <img/> and scale it down, it retains its quality.
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?
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.
Related
For a PNG image 1920x1080, which is better in quality?
<img src="the-png-image.png" width="640">
Using app (e.g. windows photos) to resize it to width 640.
<img src="the-resized-png-image.png">
Which is better in quality in Human's eyes?
Will png images resized using app lose quality?
Try it out and see if you can tell a difference.
If the image has a lot of details, you should be able to tell "the-resized-png-image.png" would look worse than the original. Now, this is assuming my past experience with chrome, the quality may vary from browser to browser due to differences in the way they downscale images.
There is also a possibility of browsers changing the way they downscale images in updates, so it may also vary with browser versions.
Here are other questions that are consistent with my findings:
Why does image lose quality when resized on the source but does not when resized using html
Make Firefox image scaling down similar to the results in Chrome or IE
Blurry downscaled images in Chrome
Has image downscaling improved in Safari 6 and 7? (5 used to be slightly blurred)
Doing your own downscaling:
HTML5 Canvas Resize (Downscale) Image High Quality?
So, to answer your question: Depends on the browser/app.
The image is 30px high. I downloaded the images with the lowest resolution I found and with a good quality. However, they are blurry.
I put a hover animation and when I move the mouse, in the time that the animation occurs it defaults and then becomes blurry again.
Is there any way to solve this ??
You could download SVG version of it
I am trying to mask dynamically sized images on a webpage. The SVG mask I use for Chrome and Safari with their webkit-mask-box-image work great by resizing the mask to fit the element I'm using which in this case is an image. Is there any thing that is similar to webkit-mask-box-image for Gecko-baised browsers?
Have you seen this html5rocks article? http://www.html5rocks.com/en/tutorials/masking/adobe/
Regardless, I think the best cross-browser solution for masks is canvas.
When a photo is displayed on a HTML5 canvas element, and is rotated, the result looks fine in FireFox but terrible in Chrome. It seems as if Google Chrome does not know how to smooth the rotated edges.
For an example take a look at http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
Make one of the photos big and have it rotated slightly around its center. Turn on the 'simple mode' so that the photo gets a white border for maximum contrast. You will now see that the edges of the photo are anything but smooth. In FireFox the result is much better!
Does anyone know if this problem can be fixed?
The Chrome team has been breaking and unbreaking anti-aliasing of different parts of Canvas for a year and a half now.
Lots of bugs crop up with the same problem: http://code.google.com/p/chromium/issues/detail?id=7508
Unfortunately, waiting is your only recourse here, unless you want to make an anti-alias effect yourself, which is possible but a lot of work for something that "should" look consistent
I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?
URL: http://weaver-wp.weavertest.com/radiation-infographic/
You are zooming your SVG file to a very large size:
background-size: 9730px 30000px;
background-position: -7310px -29250px;
Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.
The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.
Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.