Canvas

Afficher du texte en gros pixels dans une page Web

SoC, , ,
Pas facile de la jouer rétro avec les technologies du jour ! Afficher un texte en gros pixels comme sur les vieilles bécanes, c'est toute une affaire quand on sait que le moindre texte subit désormais de multiples traitements pour le rendre bien lisible à l'écran. En particulier, ses courbes sont lissées en recourant à l'anti-aliasing.
L'anti-aliasing: voilà l'ennemi. On connaît quelques contournements mis en place pour tenir compte du revival des jeux à gros pixels. Sur ce blog, cet article montre comment désactiver l'anti-aliasing dans le contexte 2D du canvas.
Toutefois, ce contournement ne fonctionne que dans le cas de la copie d'une image et le dessin de formes simples - le rectangle. L'API Canvas ne propose rien pour afficher un texte en gros pixels dans une police donnée, une police de 8x8 pixels à l'ancienne qui plus est.
Dès lors, comment parvenir à produire un pareil résultat ?
La page d'accueil de Pixel Saga: du texte pixelisé généré automatiquement
La solution est très simple. C'est tout simplement celle qui était en vigueur sur les vieux coucous... Explications.
Continuer la lecture de "Afficher du texte en gros pixels dans une page Web" →
Afficher du texte en gros pixels dans une page Web

Tracer un arc avec le canvas 2D et SVG

SoC, ,
Comment tracer un arc d'un angle donné, centré sur un point O donné et à partir d'un point A donné, avec le contexte 2d du canvas et avec SVG ?
Tracé d'un arc
La tâche n'a rien d'évident, comme il est possible d'en juger d'après le code permettant de la remplir dans l'un et l'autre cas :
  • Avec le contexte 2d du canvas, il faut demander le tracé d'un chemin en utilisant les fonctions moveTo (x0, y0) et arcTo (x1, y1, x2, y2, r), l'arc étant défini comme la plus petite partie du cercle de rayon r tangent aux droites joignant les points de tangence de ce cercle avec la droite de (x1, y1) à (x0, y0), d'une part, et avec la droite de (x1, y1) à (x2, y2), d'autre part.
  • En SVG, il faut demander le tracé d'un chemin en utilisant un objet path dont l'attribut p prend la valeur M x0 y0 A r r 0 largeArc sweep x1 y1, où (x0, y0) est le point de départ de l'arc et (x1, y1) son point d'arrivée, le cercle dont l'arc est une partie étant de rayon r et de centre déterminé par une combinaison de largeArc et sweep.
Continuer la lecture de "Tracer un arc avec le canvas 2D et SVG" →
Tracer un arc avec le canvas 2D et SVG

Désactivation de l’anti-aliasing du canvas 2D

SoC, ,
L'anti-aliasing est activé par défaut dans le canvas. Il permet de limiter la perception de l'effet d'escalier que la juxtaposition de pixels aux couleurs contrastées peut générer du fait de leur forme rectangulaire.
Ce traitement peut se révéler gênant dans certains cas (dessin au pixel, jeu old school, etc.), car il n'y a plus de certitude sur les pixels qu'une opération graphique vient modifier.
Par exemple, sur un canvas où on aura d'abord dessiné un rectangle jaune : 
context2d.strokeStyle = "rgb (255, 255, 0)";
context2d.fillStyle = "rgb (0,255, 0)";
context2d.fillRect (2, 2, 1, 1);
context2d.strokeRect (1, 1, 2, 2);
Anti-aliasing avec fillRect () et strokeRect ()
Dès lors, comment s'y prendre pour désactiver l'anti-aliasing dans le canvas ?
Mise à jour du 07/09/2018 : la propriété imageSmoothingEnabled, qui n'est pas évoquée ici, ne sert qu'à désactiver l'anti-aliasing pour l'affichage d'images.
Continuer la lecture de "Désactivation de l’anti-aliasing du canvas 2D" →
Désactivation de l’anti-aliasing du canvas 2D