A Bloody Awesome Effect

Normally when someone builds something in canvas, as soon as they set up the animation frame rate, they immediately set the canvas to clear between each frame. But that isn’t required. In fact, the default of canvas is to not clear. And that’s what’s going on here. The effect is bloody and awesome.

See the Pen A Bloody Mess by Rob Glazebrook (@rglazebrook) on CodePen.

Semi-transparent circles are moving from the top of the screen to the bottom. But the canvas isn’t being cleared between each frame. Which means we’re left with blood-red trails moving down the screen ad infinitum. Reminds me of something out of Dexter.

Play around with the demo and see what else you can come up with that capitalizes on this technique.


Rob has been building websites for more than half of his life. You'd think that'd make all this less interesting, but nope! There's a lot of awesome stuff going on webwards, and canvas is definitely one of them.

You may also like...

1 Response

  1. November 25, 2014

    […] over the top, which slowly fades the drops out of existence. It’s similar to what I did in A Bloody Mess, but with a partial overlay each […]

Leave a Reply

Your email address will not be published. Required fields are marked *