How to get started with Canvas animations in Angular
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. 👣
First, we need some 2D graphics. In this case, it’s moving some blocks on the screen. So, in this article, I will show how to draw and animate objects using HTML5 Canvas and JavaScript. I will also go through some techniques to optimize performance. Who knows, it might come in handy someday.
“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…
