Here in these series of video tutorials I explained how to use HTML5 Canvas to draw graphics. This tutorial is started from basics.
Here is the links:
Creating HTML5 Canvas Element
Tutorial on how to create HTML5 canvas element.
Drawing basic rectangle with HTML5 Canvas and JavaScript
HTML5 Canvas tutorial on how to draw a rectangle filled with black color.
Creating a line in HTML5 Canvas
How to create a straight line from a point to another point of coordinate in HTML5 Canvas.
How to create a circle in HTML5 Canvas
Drawing a simple circle in HTML5 Canvas is easy. Watch this tutorial…
Drawing a text in HTML5 Canvas
In this tutorial I’ll show you how to draw a text inside HTML5 Canvas.
How to change font size and text color of HTML5 canvas texts
It’s easy to change font size and color of HTML5 canvas texts. Watch this.
How to draw an image in HTML5 Canvas
I’ll show you how to load an image file and draw it in HTML5 Canvas.
How to center align texts and images on HTML5 Canvas
In this video tutorial I’ll show you to align text (center, left or right) and image.
How to clear HTML5 Canvas
Till now I talked about how to draw things on HTML5 Canvas. Now, how do we clear it? In this tutorial I’ll show you how to clear it.
How to animate a thing in HTML5 Canvas
By using setInterval method, we can animate a thing inside HTML5 Canvas.
How to stop rectangle movement on HTML5 Canvas
How do we stop an animation in JavaScript and HTML5 Canvas?
Making the rectangle bouncing back
Instead of stopping this rectangle, I’ll make it bounching.