Drawing basic shapes: Rectangles and lines


show more Drawing basic shapes: Rectangles and lines provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas show less
please wait ...

Drawing basic shapes: Rectangles and lines

In this movie, we were going to see how to draw some basic shapes. Now we've already seen these couple of times in other examples, but let's take a deeper look at how rectangles and lines are drawn. Now, rectangles are the only primitive shapes supported by canvas. Unlike, say another technology like SVG that also supports the ellipse, the canvas only has the rectangle as what is called a primitive shape. It's a shape that's very simple to draw and it only requires one routine. Rectangles are pretty much the only primitive one supported by canvas.

There are three functions for operating rectangles. The first one is the clearRect function, which erases the rectangle defined by the parameters you give it. In other words, it makes the area fully transparent; it gets rid of the contents of that rectangle. The other two are strokeRect and fillRect. strokeRect outlines a rectangle with whatever the current stroke style is, and fillRect fills the rectangle with whatever the curre...

Drawing basic shapes: Rectangles and lines
Video duration: 10m 21s 3h 7m Intermediate

Viewers:

Drawing basic shapes: Rectangles and lines provides you with in-depth training on Developer. Taught by Joe Marini as part of the HTML5: Graphics and Animation with Canvas

Subjects:
Developer Web
Software:
HTML
Author:
please wait ...