Android Pixelierung von HTML5 Leinwand

Question

Ich habe einen wirklich seltsamen Effekt passiert auf Android mit einem HTML5 Canvas. Hier ist der Code in Frage, es benutzt wird die quadratische Kurve:

ctx.beginPath(); 
ctx.strokeStyle = wave.stroke; 
ctx.moveTo(wave.sx, wave.sy); 
ctx.quadraticCurveTo(
    wave.x, wave.y, 
    wave.ex, wave.ey 
); 
ctx.stroke(); 

Und es zieht auf sich selbst mehrfach: http://codepen.io/EightArmsHQ/pen/9f899c4c64ab49113988055432b11a6b

Hier ist es auf einem iPhone ist:

Aber hier ist es auf Android:

Ich sage Android, aber ich habe gehört, es ist super glatt auf einem Galaxy S6.

Nur als eine Randnotiz bin ich nicht sehr vertraut mit Grafiken (d. H. GPU etc) im Allgemeinen so ein bisschen sicher, was ich eigentlich googeln sollte - also bitte vorsichtig sein, wenn Sie irgendwelche offensichtlichen Lösungen haben.

Answer 1

Ich glaube, was Sie sehen, sind aliasing Artefakte. Die Kurve deckt weniger als ein Pixel ab und aus irgendeinem Grund kann die Rasterung einige davon vollständig verfehlen. Dies scheint explizit beim Zeichnen von quadratischen Kurven zu sein, während Linien und sogar Bezier für mich gut zu funktionieren scheinen, also könnten Sie sie mit diesen annähern.