Drawing principles


Before we go on, we should take some time to clarify the way we draw on HTML5 canvases. We already mentioned that we use a graphic context for all the main operations. Whenever a shape, a text, or an image is drawn, the current values of the different properties of the graphic context are taken into account. Some are relevant only for certain kinds of shapes or drawing modes, but you must be aware that it is always the current values of these drawing properties that are used.

Later on we’ll see that there are ways to save and restore this whole set of values, but for now, let’s examine in greater detail some of the properties and methods we’ve already encountered, and introduce new ones.


fillStyle is a property of the context, similar in a way to a CSS property.

Its value can be one of the following:

    • a color,
    • a pattern (texture), or
    • a gradient.

The default value is the color black. Any kind of drawing in “fill mode” will use the value of this property to determine how to render the “filled part” of the drawing: any filled rectangle will be filled black by default, any filled circle will be filled in black, and so on.

As long as we don’t modify the value of this property, all drawing commands for filled shapes will use the current value.

fillStyle and the other context properties can be considered to be “global variables” of the context.

fillRect(x, y, width, height):  a call to this method draws a filled rectangle.

The two first parameters are the coordinates of the top left corner of the rectangle. This method uses the current value of the fillStyle property to determine how to fill the rectangle.

  1. ctx.fillStyle=‘pink’;
  2. ctx.fillRect(10,10,200,200);

Produces this result:

filled rectangle

strokeStyle is a property of the context similar to fillStyle, but this time for indicating how the shape’s outline should be rendered.

The possible values are the same as those for the fillStyle property: a color, a pattern, or a gradient. This property will be taken into account when wireframe shapes are drawn.

strokeRect(x, y, width, height): like fillRect(…), but instead of drawing a filled rectangle the rectangle is drawn in wireframe mode.

  1. ctx.strokeStyle=‘blue’;
  2. ctx.strokeRect(10,10,200,200);

…produces this result:

stroked rectangle

Only the outline of the rectangle will be drawn, and it will be drawn using the value of the strokeStyleproperty.

clearRect(x, y, width, height): a call to this method erases the specified rectangle.

Actually it draws it in a color called “transparent black” (!) that corresponds to the initial state of the rectangle as if no drawing had occurred.

  1. ctx.fillStyle=‘pink’;
  2. ctx.fillRect(10,10,200,200);
  3. ctx.clearRect(50, 50, 20, 20);

The result is:

clear rect


Draw a wireframe red rectangle, width lineWidth = 3 pixels.

Interactive example available here at JS Bin

wireframe red rectangle with line width = 3 pixels

Extract from the source code (the part that draws the rectangle):

  1. function drawSomething() {
  2.      // draw a red rectangle, line width=3 pixels
  3.      ctx.lineWidth=3;
  4.      ctx.strokeStyle=‘red’;
  5.      ctx.strokeRect(10,10,80,100);
  6. }

Here, we used “stroke” instead of “fill” in the property and method names (lines 4 and 5): strokeStyle instead of fillStyle, strokeRect(…) instead of fillRect(…).

We also introduced a new property of the context, that applies only when drawing in “stroke” mode, the lineWidth property (line 3), that is used for setting the width of the shape outline. The value is in pixels.


Let’s continue with another example. This time we will draw several shapes that share the same colors – they will be filled in red, with a blue outline. We also show how to draw a text message with a given font.

Online example on JS Bin

rectangles and text that shares colors

Source code extract:

  1. function drawSomething() {
  2.      // set the global context values
  3.     ctx.lineWidth=5;
  4.     ctx.fillStyle=‘red’;
  5.     ctx.strokeStyle=‘blue’
  6.     // font for all text drawing
  7.     ctx.font = ‘italic 20pt Calibri’;
  8.     // Draw the two filled red rectangles
  9.     ctx.fillRect(10, 30, 70, 150);
  10.     ctx.fillRect(110, 30, 70, 150);
  11.     // Draw the two blue wireframe rectangles
  12.     ctx.strokeRect(10, 30, 70, 150);
  13.     ctx.strokeRect(110, 30, 70, 150);
  14.     // Draw a message above the rectangles
  15.     ctx.fillText(“hello”, 70, 22);
  16. }


  • “stroke” means “wireframe” or “outlined”, it is a prefix for setting properties or calling methods that will affect wireframe shapes, “fill” is a prefix for filled shapes.
  • To set the properties of wireframe shapes use ctx.strokeStyle= …, for filled shapes use ctx.fillStyle=… So far the values we have used are colors, expressed as strings. Example: ctx.strokeStyle  = ‘blue’;
  • To draw a wireframe rectangle use ctx.strokeRect(x, y, width, height), to draw a filled rectangle use ctx.fillRect(x, y, width, height);
  • To set the line width of wireframe shapes, use the ctx.lineWidth property. Example ctx.lineWidth = 10; ctx.strokeRect(0, 0, 100, 100);  will draw a 100×100 rectangle in wireframe mode, with an outline width of 10 pixels.
  • To draw a text message use ctx.strokeText(message, x, y) or ctx.fillText(message, x, y), for wireframe text or filled text respectively.
  • To set the character font use the ctx.font property; the value is a font in CSS syntax, for example:  ctx.font = ‘italic 20pt Calibri’;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s