The canvas API is without a doubt an important aspect of the HTML5 ensemble. With a little patience and perseverance, any web author can create evocative imagery that complements and enhances the utility and functions of his or her site. Because the aesthetic feel of a rich Internet application (RIA) is as important as its operational function, Canvas can play a significant role in your development. This exercise tests your ability to create basic objects and simple movement.


Grace Walker, IT Consultant, Walker Automated Services

Grace Walker, a partner in Walker Automated Services in Chicago, Illinois, is an IT consultant with a diverse background and broad experience. She has worked in IT as a manager, administrator, programmer, instructor, business analyst, technical analyst, systems analyst, and Web developer in various environments, including telecommunications, education, financial services, and software.

07 October 2011

In this exercise, you create a square, a rectangle, a triangle, and two circles. When you have completed the objects, you will have created a vehicle. Then, you will animate that vehicle.

Frequently used acronyms

  • Ajax: Asynchronous JavaScript + XML
  • API: Application programming interface
  • CSS3: Cascading Style Sheet version 3
  • HTML5: Hypertext Markup Language version 5
  • W3C: World Wide Web Consortium
  • XML: Extensible Markup Language

To complete the tasks required, you should:

  • Understand HTML5 in general
  • Understand the basics of JavaScript


  1. Create a canvas that is 600 by 400 pixels.
  2. Draw a square at x and y coordinates 210 and 240 with a width and height of 65. Fill the square black.
  3. Draw a rectangle at x and y coordinates 0 and 175 with a width of 200 and height of 125. Fill the rectangle black.
  4. Draw a triangle that starts at coordinates 210,175. The second coordinate is 275,235, the third coordinate is 210,235, and the final coordinate takes you back to the starting position: 0,175. Fill the triangle black.
  5. Draw two circles. The first circle has an x value of 250, a y value of 330, and a radius of 20. The second circle has an x value of 50, a y value of 330, and a radius of 20. The fill color for both circles should be #800000, and the stroke color should be black. The line should be 5 pixels.
  6. You should now be able to see the vehicle drawn by the coordinates given above. Now that you have drawn the vehicle, move it using the if statement shown in Listing 1. Use the value created—positionX—to animate the truck by altering the x coordinates.
Listing 1. If statement that creates the position value
if (positionX < 600)
        positionX += 1;
         positionX = -175;

Exercise solution

Follow these solution steps to check your work.



developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Dig deeper into Web development on developerWorks

Zone=Web development
ArticleTitle=Practice: Creating geometric figures