← Home

Animating Within Canvas Using jQuery

Published • Last Updated • 1 minute

If you are like me and completely enamored with HTML 5's canvas tag you have at one point or another setup animations for entities drawn in canvas.

Recently I was exploring simple ways of animating entities in canvas and happened upon this trick with the jQuery animate method.

Be aware, the use of an underscore in front of each key is required as the object passed to animate is not a valid DOM object.

With the jQuery library you can set the easing of an animation to either linear or swing. However, if you also include jQuery UI you will have access to 30 additional types of easing (listed below).

To demonstrate how easy it is to use $.animate with canvas I put together this demo on CodePen.