Puis-je désactiver l'antialiasing sur un fichier HTML <canvas> élément?

Question

Je joue avec les éléments <canvas> , en dessinant des lignes, etc.

J'ai remarqué que mes lignes diagonales sont antialiasées. Je préférerais le look brouillon pour ce que je fais - y a-t-il un moyen de désactiver cette fonctionnalité?

Answer 1

Dessinez votre 1-pixel des lignes de coordonnées comme ctx.lineTo(10.5, 10.5). Le dessin d'un trait d'un pixel sur le point d' (10, 10) signifie, que ce 1 pixel à la position atteint d' 9.5 de 10.5 qui se traduit par deux lignes dessinés sur la toile.

Une belle astuce pour ne pas toujours besoin d'ajouter l' 0.5 de l'effectif de coordonnées que vous souhaitez tirer plus si vous avez beaucoup de lignes de pixels, est d' ctx.translate(0.5, 0.5) votre ensemble de la toile au début.

Answer 2

Pour les images, il y a maintenant context.imageSmoothingEnabled = false .

Cependant, rien ne contrôle explicitement le dessin au trait. Vous aurez peut-être besoin de tracer vos propres lignes (à la dure ) en utilisant getImageData et putImageData .

Answer 3

Cela peut être fait dans Mozilla Firefox. Ajoutez ceci à votre code:

 contextXYZ.mozImageSmoothingEnabled = false;
 

Dans Opera, c'est actuellement une demande de fonctionnalité, mais j'espère qu'elle sera bientôt ajoutée.

Answer 4

Je dessinerais tout en utilisant un algorithme de ligne personnalisé tel que l'algorithme de ligne de Bresenham. Découvrez cette implémentation javascript: http://members.chello.at/easyfilter/canvas.html

Je pense que cela va certainement résoudre vos problèmes.

Answer 5

 ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;
 

Avec ce combo, je peux dessiner de belles lignes fines de 1px.