Square pixels in Canvas (for now)

If you're trying to do super cool retro games with Canvas, you SHOULD be able to draw lil' images and stretch them with CSS by applying this to the canvas object:

image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
width: 500%;

BUT, Chrome has gone and spoiled everything: the -webkit-optimize-contrast isn't working and the bug has been opened for a long time, so we need to take matters into our own hands...

The (an) answer is "don't do the stretching in CSS, but in Canvas itself"... in On the canvas context you can set the following options:

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

Then when you draw:

ctx.save();
ctx.scale(5, 5); // Scale 5x
.... // draw here
ctx.restore();

Ahh, nice square pixels.