HTML5 Canvas .translate und .scale verursacht gezackte Kanten auf Bildern

Question

Hier ist ein Beispiel: Codepen. Klicken Sie einfach irgendwo in die Leinwand (es wird schwarze Ränder haben) und ein violetter Stern wird gezeichnet.

Wie Sie sehen können, hat der Stern gezackte Kanten. Es ist mit .translate und .scale gezeichnet. Um zu beweisen, dass .translate und .scale die gezackten Kanten verursachen, gehen Sie zu Zeile 28 (im Abschnitt CodePen JavaScript) und entfernen Sie das Kommentarzeichen. Dann kommentieren Sie Zeile 27 aus. Wenn Sie auf die Zeichenfläche klicken, wird der Stern ohne .translate und .scale gezeichnet, aber keine gezackten Kanten.

Der Stern wurde in Adobe Illustrator gezeichnet und wird als 300x300px PNG exportiert.

Update: Ich muss übrigens PNG 's verwenden. No JPG, SVG usw.

Wie behebe ich dieses Problem?

---

Was ich bisher ausprobiert habe, aber nicht helfen:

1. Ausgeschaltet Anti-Aliasing in Adobe Illustrator General Preferences
2. Ausgeschaltet Anti-Aliasing in Adobe Illustrator des Dokument-Raster und Effekte Einstellungen
3. Benutzt Bildschirm 72ppi statt 300ppi (Standard) in Illustrator's Dokument Raster und Effekte Einstellungen
4. Setzen Sie einen Strich (Rahmen) auf die Stern und machte diesen Strich 0% Deckkraft. Ich dachte, dass nur die Ränder/Kanten gezackt werden. Also, ich dachte, dass der Strich "unsichtbar" wäre, dass canvas würde nur die 0% Opazität Strich als gezackt und daher nichts wird gezackt aussehen. Aber das hat auch nicht funktioniert.

5. Ich habe versucht, diese mit CSS "Hacks" vorgeschlagen:

   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*/ }

6. ich auch dieses JavaScript versucht haben, mit "Hack":

   context.webkitImageSmoothingEnabled = true; context.mozImageSmoothingEnabled = true; context.imageSmoothingEnabled = true; /// future

---

Hinweis: Ich habe den gesamten Code in Codepen lokal in Safari, Firefox und Chrome ausprobiert, bevor Sie alle in Codepen hinzufügen.

Answer 1

Wenn Sie den Stern in Vektor ändern, löst es das Problem.

star_img.src='data:image/svg+xml;utf8,<svg width="300px" height="275px" viewBox="0 0 300 275" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="#fdff00" stroke="#605a00" stroke-width="15" points="150,25 179,111 269,111 197,165 223,251 150,200 77,251 103,165 31,111 121,111" /></svg>'; 

http://codepen.io/anon/pen/QyBGMv