REMARQUE : cela a à voir avec la façon dont les éléments de canevas existants sont rendus lors de la mise à l'échelle , pas avec la façon dont les lignes ou les graphiques sont rendus sur une surface de canevas . En d'autres termes, cela a tout à voir avec l' interpolation des éléments mis à l'échelle , et rien à voir avec l' anticrénelage des graphiques dessinés sur une toile. Je ne suis pas préoccupé par la façon dont le navigateur trace des lignes; Je me soucie de la façon dont le navigateur rend l'élément de toile lui - même lorsqu'il est mis à l'échelle.
Existe-t-il une propriété de canevas ou un paramètre de navigateur que je peux modifier par programmation pour désactiver l'interpolation lors de la mise à l'échelle des <canvas>éléments? Une solution multi-navigateurs est idéale mais pas indispensable; Les navigateurs basés sur Webkit sont ma principale cible. La performance est très importante.
Cette question est très similaire mais n'illustre pas suffisamment le problème. Pour ce que ça vaut, j'ai essayé image-rendering: -webkit-optimize-contrasten vain.
L'application sera un jeu de style 8 bits «rétro» écrit en HTML5 + JS pour préciser ce dont j'ai besoin.
Pour illustrer, voici un exemple. ( version en direct )
Supposons que j'ai une toile 21x21 ...
<canvas id='b' width='21' height='21'></canvas>... qui a css qui rend l'élément 5 fois plus grand (105x105):
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */Je dessine un simple 'X' sur la toile comme ceci:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});L'image de gauche est ce que Chromium (14.0) rend. L'image de droite est ce que je veux (dessinée à la main à des fins d'illustration).
