Adventures in HTML5 Canvas

Recently, I was tasked with replacing a background video, created in Apple Motion, with an HTML5 canvas animation. Having never worked with canvas before, I was suprised at how fundamentally simple the canvas API was, though I can't say it was 'easy' to work with neccessarily. Many hours of blood, sweat and tears later, I was able to produce something very close to the original video.

See the Pen Animated Dividers by Nic Chan (@nchan0154) on CodePen.

anchorCanvas Basics

The canvas API is fairly primitive in that once you draw a shape, you can't really go back and edit it. This is the exact opposite of CSS or Javascript animation frameworks like GSAP, where you can reach in and grab a particular element with the targeted use of selectors. Because of this, the typical animation flow goes something like this:

  1. Clear the canvas
  2. Draw the canvas elements
  3. Modify the elements that are to be animated
  4. Grab the next frame, typically with requestAnimationFrame

It's pretty amazing to think that with every frame of this animation, we're drawing the same lines over again, eh? MDN was an invaluable source for me when I was trying to understand this process.

anchorOn Algorithmic Perfection

I spent a lot of time trying to come up with the perfect formulas for calculating things like opacity, speed, and scaling. If we were modelling a real life situation, getting an accurate algorithm would be top priority, but since we are merely using these functions to generate a visual representation, there is a lot more freedom! Getting something that just 'feels right' is perfectly acceptable, and in some cases, preferred, over trying to manually calculate that perfect bezier curve.

anchorOn Persistence

Canvas Lines

I admit I'm a little ashamed to post this, but above is my first attempt at trying to generate a pattern of network lines with Javascript. It wasn't even in the same ballpark as what we needed, and I used exactly none of the code in the final product. Regardless, it's an important reminder that experimentation is necessary - you will probably fail your first few attempts when attempting a new thing, and that's perfectly normal.

If you want to see it in action, you can check out the final animation out on the Darkshore Website.