Ci-contre, un canvas (HTML5 + JavaScript) mettant en scène des Metaballs en deux dimensions.
Elles sont obtenues grâce à l'utilisation d'un canvas invisible (présent dans le DOM, mais non affiché dans la page HTML) sur lequel va se balader de simples sphères ayant pour couleur de remplissage un dégradé radial.
JavaScript va ensuite, pour chaque frame, lire chaque pixel du canvas et renvoyer une certaine couleur si le pixel lu est d'une valeur comprise entre deux extremas.
A noter qu'il serait possible de gagner (largement) en fluidité en effectuant le changement de couleur directement sur le canvas de calcul. En effet, dans ce programme, en plus de contrôler la valeur des pixels, pour chaque frame on change la couleur du dit pixel selectionné (s'il est compris dans les valeurs recherchées) avant de l'envoyer au canvas d'affichage. Colorier directement le pixel de calcul avec la bonne couleur réduit drastiquement le temps de calcul, à l'échelle d'une frame.