Für ein Projekt wollten wir mittels Canvas-Element den Effekt von ineinander fließenden Tropfen simulieren. Ein üblicher Ansatz ist die Verwendung eines Blur-Filters und anschließend die Erhöhung des Kontrastes (hier ein kleines Beispiel). Das ist mit dem Canvas-Element so leider nicht (performant) möglich.

Stattdessen war unser Ansatz einen radialen Verlauf auf einen Kreis zu zeichnen, der nach außen hin transparent wird und dann über die Überlagerungen den gewünschten Effekt zu erzielen. Das Ergebnis war allerdings nicht so berauschend. Da Kreise zeichnen recht teuer ist war die Performance unterirdisch und zudem wirkten die Überschneidungen nicht wirklich flüssig.

An dieser Stelle bin ich auf Parcycle, ein Canvas Particle System, gestoßen. Der Autor Mr  Speaker löst das Performanceproblem indem er statt Kreisen einfach Vierecke rendert, was bei dem radialem Verlauf ja keinen wirklichen Nachteil darstellt, solange keine Kollisionsabfragen ins Spiel kommen.
Was meinen Script dann noch für einen schönen Übergang zwischen den einzelnen Tropfen fehlte war die Compositing-Eigenschaft “lighter” und das der radiale Verlauf nach rgba(0,0,0,0) ausläuft.

Nach der Zugabe von ein wenig Physik sieht das Ganze dann so aus: http://antwerpes.it/examples/canvas_water/
Für alle die mal ein wenig damit rumspielen wollen (Farbe, Anzahl, Größe, etc) habe ich ein passendes Fiddle eingerichtet.

Bisher beeinflussen sich die einzelnen Tropfen nicht gegenseitig. Für eine realistischere Darstellung sollten sie sich z.B. gegenseitig verdrängen, abhängig von Geschwindigkeit und Gewicht. Aber für die Veranschaulichung des Effekts muss das hier reichen

Allerdings ist es mir bisher nur gelungen es vor schwarzem Hintergrund ordentlich hinzubekommen, ansonsten sieht man die radialen Verläufe deutlich. Das hat wohl etwas mit dem Compositing und Farbaddition zu tun. Wer da eine Idee hat…gerne her damit.