Beginning HTML5 Game Development – Drawing Primitives

Goals:

• Learn the difference between a filled primitive and a stroked primitive
• Learn to set options for drawing such as color and line width
• Learn to draw rectangles, circles, and custom polygons

Today, we’ll explore the world of primitives. It has always been a preference of mine to learn to draw shapes before tackling sprites when learning a new API. I find that it keeps you focused on the goal of learning this new technology instead of losing interest when you can’t find/make any good sprites.

The first thing to note is that there are two types of primitives: a filled primitive and a stroked primitive. A filled primitive simply applies a color over the entire shape, whereas a stroked primitive only provides an outline. There are a few settings for drawing primitives but the important three are as follows:

buffer.strokeStyle = "rgb(255, 0, 0)";
buffer.fillStyle = "rgb(0, 255, 0)";
buffer.lineWidth = 2;

First note that if you aren’t using my skeleton, buffer is simply a context to a buffer object. fillStyle is used to set the color for filled primitives and strokeStyle does the same for stroked primitives. lineWidth sets the pixel width for stroked primitives. But enough about the options, let’s draw something.

// Rectangle
buffer.fillRect(x, y, width, height);
buffer.strokeRect(x, y, width, height);

// Circle
buffer.beginPath();
buffer.arc( x, y, radius, 0, Math.PI*2, true);
buffer.fill();
buffer.closePath();

// Custom Polygon
buffer.beginPath();
buffer.moveTo(x, y); // Start
buffer.lineTo(x, y);
...
buffer.lineTo(x, y); // End
buffer.fill();
buffer.stroke();
buffer.closePath();

Here, we have three types of primitives: the rectangle, the circle, and the custom polygon. The rectangle is the simplest to draw, requiring only that you choose between a filled version or a stroked version (or use both). The circle is a little trickier; circles require the arc() function. The arc() function sweeps out from the x,y position provided with a radius (also provided) from angle A to angle B. If the final option is true, the function sweeps counterclockwise, else it sweeps clockwise (not that this matters for a circle.) By sweeping from an angle of zero to an angle of 2π, we go full… circle. :)

… :)

*cough* Anyways, the arc code is encased in a beginPath() and endPath() segment which are best summarized as “designators” that you are making a custom shape. Notice the rectangle doesn’t need this. When working with custom shapes you can still choose between filled and stroked by simply calling fill() or stroke() from the buffer context.

Last, we have a custom polygon. The first point requires a moveTo() call and every subsequent point requires a lineTo() call. It’s worth noting that it’s not necessary to *close* the polygon by drawing a line back to the starting point when using fill() but *is* required if using stroke().

There are more primitives you could use but these should be enough to make place holder art or to recreate pong (like I did a while back XD.) Tomorrow is looking like an introduction to input. Thank you for reading. ^^