Масштабирование тега CANVAS
Думаю, многие знают, что у тега CANVAS можно задать размер, а потом смасштабировать его до нужных размеров при помощи CSS.
<canvas width="10" height="10" style="width:100px; height:100px"></canvas>
В этом случае, он не меняет свой размер, доступный из кода, но на экране растягивается или сжимается до указанных величин. Иногда это бывает полезно, но есть недостаток — все браузеры, в которых я это пробовал, сглаживают («размывают») содержимое этого тега, что иногда нежелательно.
У меня нет возможности посмотреть под всеми распространёнными версиями браузеров, но, как выяснилось в эксперименте, с современными работает такой трюк, можно указать алгоритм масштабирования для изображений, который для «канваса» тоже работает:
canvas {
image-rendering: optimizeSpeed; /* old WebKit, Safari, FireFox 3.6+ */
image-rendering: -webkit-optimize-contrast; /* newer WebKit (CSS3 proposal) */
image-rendering: -o-crisp-edges; /* Opera 11.6+ (CSS4 prefixed) */
image-rendering: -moz-crisp-edges; /* FF 6+ (CSS4 prefixed) */
image-rendering: crisp-edges; /* CSS4 */
}

Чтобы была понятно о чём вообще речь — слева на скриншоте версия без сглаживания (с применёнными стилями), справа — со сглаживанием, это я прочертил одну линию:
with (canvas.getContext('2d')) {
moveTo(0, 0);
lineTo(10, 10);
stroke();
}
Я снабдил код комментариями, чтобы было видно где это работает. К сожалению, в Эксплорере ничего не получится, когда-то у него было свойство -ms-interpolation-mode, но с девятой версии (где и появился «канвас») оно уже не работает, придётся решать проблему через JS.
Добавлено позднее: похоже, у Хрома тоже проблемы. На разных ОС может работать или нет.