Start Animating with the HTML5 Canvas

 11 Reviews Add a review

Published July 2017

You may have animated with CSS, but have you tried HTML5?

The HTML5 canvas element is a great way to add lightweight graphics and animations to your websites. Since the canvas API works identically on most modern browsers on both desktop and mobile, browser idiosyncrasies aren’t often an issue. In this series, you are going learn the basics to start using the HTML5 canvas productively.

Thirsty for more? Try our CSS Animation Tips mini course, within the first lesson you’ll learn to work with basic CSS animation functions. That was just a taster, let Donovan from CSS Animation Rocks teach you everything you need to know about creating professional CSS web animations with our course Animating with CSS. With an almost 5-star rating, it’s clear to see why so many students love this course.

Oh yeah, and the whole SitePoint library! Learn More.

What you'll learn

. How to initializing a canvas and draw on it - How to animate canvas drawings - Learn to create complex drawings using states and transformations

  • Closed captions available
Meet your instructor
Ashraff Hathibelagal

Ashraff is a blogger and freelance programmer, who loves tinkering with new frameworks, SDKs and devices. He has been building enterprise applications for various multinational organizations using HTML, PHP and Java for over a decade now, something he still enjoys. Lately, Ashraff has become obsessed with newer languages such as Ruby and Kotlin, never missing a chance to use them in his projects.

Lesson 1: Animating with the HTML5 Canvas
Creating Simple Illustration with HTML5 Canvas 8:27
Creating Animations with HTML5 Canvas 5:22
Efficient Animations Using Canvas States and Transformations 7:28
How to Create a HTML5 Animation with Sprites 8:28

Leave a Review