\
**Category:** programming\
**Created:** [November 23, 2014, 1:41am UTC](https://forum.kirupa.com/t/creating-a-simple-html5-canvas-animation-kirupa-com/352189 "2014-11-23T01:41:12Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 1:41am UTC](https://forum.kirupa.com/t/creating-a-simple-html5-canvas-animation-kirupa-com/352189/1 "2014-11-23T01:41:14Z")
by [kirupa](http://www.kirupa.com/me/index.htm) | 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](http://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm)
---
**Author:**  [@mann\_patel](https://forum.kirupa.com/u/mann_patel)\
**Post date:** [August 18, 2015, 4:34pm UTC](https://forum.kirupa.com/t/creating-a-simple-html5-canvas-animation-kirupa-com/352189/2 "2015-08-18T16:34:02Z")
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…
---
**Author:**  [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 20, 2015, 4:08am UTC](https://forum.kirupa.com/t/creating-a-simple-html5-canvas-animation-kirupa-com/352189/3 "2015-08-20T04:08:52Z")
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](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths)
😃