How to Draw Shapes on JavaScript’s Canvas for HTML5 and CSS3 Programming

By Andy Harris

A few primitive shapes can be drawn directly onto the graphics context in JavaScript. The most common shapes for HTML5 and CSS3 programming that most web developers use are rectangles and text.

Rectangle functions

You can draw three different types of rectangles:

  • clearRect(x, y, w, h): Erases a rectangle with the upper-left corner (x,y) and size (w,h). Generally, erasing draws in the background color.

  • fillRect(x, y, w, h): Draws a box with upper-left corner (x, y) and size (w,h). The rectangle is filled in with the currently-defined fillStyle.

  • strokeRect(x, y, w, h): Draws a box with upper-left corner (x, y) and size (w,h). The box is not filled in, but the outline is drawn in the currently-defined strokeStyle and using the current lineWidth.

    image0.jpg

Here’s the code:

 function draw(){
 //from rectangle.html
 var drawing = document.getElementById("drawing");
 var con = drawing.getContext("2d");
 con.fillStyle = "red";
 con.strokeStyle = "green";
 con.lineWidth = "5";
 con.fillRect(10, 10, 180, 80);
 con.strokeRect(10, 100, 180, 80);
 } // end draw

How to draw text

The <canvas> tag has complete support for text. You can add text anywhere on the canvas, using whichever font style and size you wish.

image1.jpg

Text is drawn onto canvas much like a rectangle. The first step is to pick the desired font. Canvas fonts are created by assigning a font to the context’s font attribute. Fonts are defined like the single-string font assignment in CSS. You can specify all of the font characteristics in the same order you do when using the font shortcut: style, variant, weight, size, and family.

When you’re ready to display actual text on the screen, use the fillText() method, which accepts three parameters. The first parameter is the text to display. The last two parameters are the X and Y position of the left-hand side of the text. The following code is used to produce the result. When the strokeStyle is not explicitly set, the stroke is black by default.

 function draw(){
  //from text.html
  var drawing = document.getElementById("drawing");
  var con = drawing.getContext("2d");
  //clear background
  con.fillStyle = "white";
  con.fillRect(0,0, 200, 200);
  // draw font in red
  con.fillStyle = "red";
  con.font = "20pt sans-serif";
  con.fillText("Canvas Rocks!", 5, 100);
  con.strokeText("Canvas Rocks!", 5, 130);
 } // end draw

How to add shadows

You can add shadows to anything you draw on the canvas. Shadows are quite easy to build. They require a number of methods of the context object:

  • shadowOffsetX: Determines how much the shadow will be moved along the X axis. Normally this will be a value between 0 and 5. A positive value moves the shadow to the right of an object. Change this value and the shadowOffsetY value to alter where the light source appears to be.

  • shadowOffsetY: Determines how far the shadow is moved along the X axis. A positive value moves the shadow below the object. In general, all shadows on a page should have the same X and Y offsets to indicate consistent lighting. The size of the offset values implies how high the element is “lifted” off the page.

  • shadowColor: The shadow color indicates the color of the shadow. Normally this is defined as black, but the color can be changed to other values if you wish.

  • shadowBlur: The shadowBlur effect determines how much the shadow is softened. If this is set to 0, the shadow is extremely crisp and sharp. A value of 5 leads to a much softer shadow. Shadow blur generally lightens the shadow color.

If you apply a shadow to text, be sure that the text is still readable. Large simple fonts are preferred, and you may need to adjust the shadow color or blur to ensure the main text is still readable. After you’ve applied shadow characteristics, all subsequent drawing commands will incorporate the shadow. If you want to turn shadows off, set the shadowColor to a transparent color using RGBA.

Here’s the code to produce text with a shadow:

image2.jpg

 <!DOCTYPE HTML>
  <html lang = "en">
  <head>
  <title>shadow.html</title>
  <meta charset = "UTF-8" />
  <style type = "text/css">
   body {
   background-color: #cccccc;
   }
  </style>
  <script type = "text/javascript">
   function draw(){
   //from shadow.html
   var drawing = document.getElementById("drawing");
   var con = drawing.getContext("2d");
   //clear background
   con.fillStyle = "white";
   con.fillRect(0,0, 200, 200);
   // draw font in red
   con.fillStyle = "red";
   con.font = "18pt sans-serif";
   //add shadows
   con.shadowOffsetX = 3;
   con.shadowOffsetY = 3;
   con.shadowColor = "gray";
   con.shadowBlur = 5;
   con.fillText("Canvas Rocks!", 5, 100);
   } // end draw
  </script>
  </head>
  <body onload = "draw()">
  <h1>Shadows</h1>
  <canvas id = "drawing"
    height = "200"
    width = "200">
   <p>Canvas not supported!</p>
  </canvas>
  </body>
  </html>