Creating a Simple HTML5 Canvas Animation | kirupa.com

by kirupa | 19 April 2013

By now, you'll probably agree with me that creating animations in code is really REALLY fun. You write a few lines of code and (a few moments later) you have something that is happily moving around the screen. In this tutorial, I am going to show you how to take this fun to a whole new level...legally! You are going to learn how to animate what you draw yourself as opposed to using something predefined out of a can like a div, img, or some other DOM element.


This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm

how can i add a heart shape to it and its pulsing effect cause the ossillation of the heart beat is not like sin or cos…please give it a tought…

You can draw paths pretty easily on the canvas, and this API reference may help you out: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths

:smiley: