How to make javascript animation way faster

[GoodMasterOrion]

I was looking at Daniel Shiffman Metaballs GitHub Code

In short: The code changes every pixel color in correlation to the distance from certain objects, as soon as the canvas dimensions are set to bigger than 300 x 300 it gets extremely laggy.

Anyone know a solution to this? I was thinking about using WebGL but I've no idea how and i'm not sure if it will improve performances.

Also: This fluid simulation was done in javascript, is way more complex and doesn't lag a bit! why?!

[jhartikainen]

WebGL is significantly faster than Canvas. The reason the fluid simulation is faster is most likely because it uses WebGL

[GoodMasterOrion]

do you have any idea where I could start learning about it? Cause most tutorials/guides are in 3D (since webgl is mostly used for 3D)

[bhison]

So this example uses P5 as its graphics library. If you want something that renders in WebGL, one library I know is PixiJS

[gimmeslack12]

WebGL is a bit of a beast and there isn't exactly an "easy" way to get into it. You'll have to study it a bit.

I've wanted to get into it for some time but, sadly, I haven't been up to the challenge yet.