Here's an example: Codepen . Just click anywhere on the canvas (it will have black borders) and a purple star will be drawn.
As you can see, the star has jagged edges. It is drawn using .translate and .scale . To prove that .translate and .scale cause jagged ribs, go to line 28 (in the JavaScript CodePen section) and uncomment it. Then comment on line 27. When you click on the canvas, the star is drawn without .translate and .scale , but it does not have jagged edges.
The star was drawn in Adobe Illustrator and exported in PNG format 300x300 pixels in size.
Update: By the way, I need to use PNG . No JPG , SVG , etc.
How to fix this problem?
What I tried so far, but did not help:
- Disable Anti-Aliasing in the general settings of Adobe Illustrator
- Disable Anti-aliasing in the settings of raster and effects of Adobe Illustrator document
- Used 72ppi screen instead of 300ppi (default) in Illustrator Document Raster and Effects Settings
- Place the stroke (border) on the star and make this stroke 0% opacity. I thought it was only a border / edges that become jagged. So, I thought that the hit would be “invisible”, that the
canvas would only make the 0% opacity move like a jagged, and therefore nothing would look jagged. But that didn't work either. I tried using these CSS suggested hacks:
canvas { image-rendering: crisp-edges; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ /*image-rendering: pixelated; // Awesome future-browsers */ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; /*IE*/ }
I also tried using this JavaScript hack:
context.webkitImageSmoothingEnabled = true; context.mozImageSmoothingEnabled = true; context.imageSmoothingEnabled = true; /// future
Note. I tried all the code that was on Codepen locally in Safari, Firefox and Chrome, before adding them to Codepen.
source share