Es gibt bereits mehr als ein paar "CSS transform = blurry text" -Einträge auf SO, aber ich glaube, ich habe hier einen einzigartigen Trottel. Ich habe alle anderen Korrekturen ohne Erfolg versucht.

Ich implementiere die CSS-Methode zum Zentrieren / Mittleren Ausrichten von Transformationen:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate(-50%,-50%);
}

Sobald ich ein Bild über drawImage anwende UND die Größe der Leinwand, die sich unter dem befindet, ändere.centered Element beginnt der Text auf dem "halben Pixel" zu verschwimmen. Das-webkit-transform-style: preserve-3d Fix hat keine Auswirkung. Dies geschieht nur in Chrome und Safari.

Hier ist ein Stift mit einem reduzierten Testfall:http://codepen.io/andrewtibbetts/pen/owzJa

Wenn Sie die Größe des Fensters ändern, werden Sie feststellen, dass die Unschärfe aufhört, wenn sich der Text nicht direkt über der Zeichenfläche befindet.