How to Get Started with Canvas Animations in JavaScript
Or how my dreams of writing a game started by animating a square block…
I love playing games. And I love coding too. So, one day, I got thinking, why not use those coding skills to make a game? But it sounds hard. How would one even get started?
With baby steps. 👣
In this article, we learn to draw and animate objects using HTML5 Canvas and JavaScript before we optimize for performance.
“Animation is not the art of drawings that move but the art of movements that are drawn.” — Norman McLaren
Introduction
Apple introduced Canvas in 2004 to power applications and the Safari browser. A few years later it was standardized by the WHATWG. It comes with finer-grained control over rendering but with the cost of having to manage every detail manually. In other words, it can handle many objects, but we need to code everything in detail.
The canvas has a 2D drawing context used for drawing shapes, text, images, and other objects. First, we choose the color and brush, and then we paint. We can change the brush and color before every new drawing, or we can continue with what we have.
