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.
- Clear the canvas
- Draw the canvas elements
- Modify the elements that are to be animated
- 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.
If you want to see it in action, you can check out the final animation out on the Darkshore Website.