Improve canvas rendering quality

[DavidGasku]

I've been doing some research about ways to improve canvas rendering, maybe we could apply them to snap. As it would involve many changes, I guess it's safer to gather the info here, and discuss where would be better to apply the changes.

Improve text with subpixel antialiasing

https://stackoverflow.com/questions/4550926/subpixel-anti-aliased-text-on-html5s-canvas-element This one should be easy, by getting the context with a flag: canvas.getContext("2d", {alpha: false}). But as far as I undertand, the context is retrieved the same for any Morph, and transparency is needed for some of them.

Avoid blurred lines or shapes

http://diveintohtml5.info/canvas.html#pixel-madness tdlr; by a bad design decision, HTML canvas coordinates fall between pixels, so in order to have crisp lines or shapes Morphs should render their lines or shapes using half coordinates when straight lines are involved. Or, as some suggest, just translate the whole context half a pixel ctx.translate(0.5, 0.5);

Any more ideas or suggestions?

[jmoenig]

Do we really have an issue with rendering? Snap! really looks great and crisp on my non-retina monitor, and breathtakingly sharp on my retina one. One detail to remember is that we're going out of our way to down-sample sprites and backgrounds to "normal" (i.e. non-retina) resolution. Therefore what's shown on the stage sometimes looks less sharp compared to other areas of Snap, e.g. the blocks. But that's entirely intentional, because otherwise we'd loose some of the snappiness and speed on slower hardware.

[DavidGasku]

Take for example the arrows that control rotation. They look blurry to me:

Applying the 0.5 offset.

EDIT: in some cases modifying the Morph itself is required, so it draws itself using whole numbers. Take for example the little keyboard. I had to modify its SymbolMorph in order to draw it unblurred. var h = this.size, u = h / 12, k = h / 6, row, col;

I don't have a retina monitor, sadly, I guess the problem is mitigated there. Anyway, I may be a perfectionist here, but I like things to be pixel perfect ;)

[cycomachead]

Can you look up what your devicePixelRatio is? I'm curious if it might be a non-integer number.