INTRODUCTION TO CANVAS

Introducing the basics of drawing on the HTML5 canvas component.

On the left (sample 1) we fill a rectangle using a simple color, then a vertical gradient, and then an horizontal gradient. On the right (sample 2) first we apply the same horizontal gradient on the first example, but using some larger coordinates (the gradient begins more on the left and ends more on the right). Finally we apply a pattern to the rectangle, using an hidden image (but loaded within this page).

For further detail see the canvas API reference on the W3CSchool site.

To browse the code click on the Show code, Show markup labels below.


Sample 1

Sample 2




Show code


Show markup