css - Translate + Canvas = Blurry Text -

css - Translate + Canvas = Blurry Text -

there more few "css transform = blurry text" entries on think have unique doozy here. have tried other fixes no avail.

i'm implementing css transform center / middle align method:

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

once apply image via drawimage , resize canvas underneath .centered element, text starts blurring on "half pixel". -webkit-transform-style: preserve-3d prepare has no effect. happens in chrome , safari.

here's pen reduced test case: http://codepen.io/andrewtibbetts/pen/owzja

by resizing window, you'll notice blurring stops if text not straight above canvas.

css text translate blurry