Autre balise intéressante arrivée avec HTML 5, la balise Canvas. Elle permet en effet de fournir à la page internet un espace graphique dans lequel on peut dessiner de manière très poussée, en deux ou trois dimensions, suivant le besoin.
Attention, pour profiter des exemples ci-dessous, vous devez disposer d'un navigateur récent prenant en compte le standard Canvas.
_ Firefox 3.6 ou Firefox 4 Beta .
_ Google Chrome .
Ci-dessous, un canvas (HTML5 + JavaScript) mettant en scène des Metaballs en deux dimensions. Elles sont obtenues grâce à l'utilisation de trois canvas de cache, absents du DOM et de l'affichage, et d'un canvas de rendu, visible dans la page.
Un premier canvas, de la taille de l'animation finale, est utilisé pour calculer (une seule fois) et garder en mémoire les dégradés linéaires des barres transversales haute et basse.
Un second, de la taille d'une balle, est utilisé pour calculer (lui aussi une seule fois) et garder en mémoire le dégradé d'une metaball.
Le troisième et dernier canvas de cache, de la taille de l'animation, est recalculé à chaque rafraichissement de l'animation : il place chacune des metaballs à sa nouvelle position en fonction du temps.
Enfin, le 4ème canvas calcul l'effet de coalescence entre les metaballs et entre les metaballs et les barres transversales (grâce à un clampe de la valeur alpha de chaque pixel du 3ème canvas de cache) avant d'afficher le résultat dans la page.
Ci-dessous, un canvas (HTML5 + JavaScript) permettant d'afficher des objets en trois dimensions après l'obtention d'un contexte WebGL.Au stade de développement actuel, il est possible de charger puis d'afficher différents objets à partir de fichiers COLLADA. Seule les composantes diffuse (et pour un seul matériau), couleur et texture, sont passées au shader. D'autres améliorations suivront
[/section]