Updated: 2007/5/29

Creating Graphics with JavaScript

Last Updated by: Hosna Jabbari
Comments to: KangKang Yin (kkyin at cs dot ubc dot ca)
Sources and contributions: This lab is derived from prior (Java) versions created by Willa Duplantis. Subsequent revisions were made by Tanya Ellchuk, Holger Hoos, Jake Wires, and Andrew Kaufman

Contents:

Objectives

In this lab you will gain a general understanding of how computer programming can be used to create basic shapes and animation. You will be introduced to JavaScript tools which are designed for this purpose.

Lab Overview

Before the Lab

In this lab you are to write JavaScript code that, when run by a web browser, displays particular graphical objects on a given webpage. In this section we discuss some fundamentals that you will need to create graphics by programming, and we provide examples along the way that you can use in your own art work.

NB. For this lab, use the Mozilla Firefox browser to avoid compatibility issues.

The Coordinate System

All graphical objects you draw lie on a canvas, which is a 2-dimensional X-Y coordinate system based on pixels. The X-axis runs horizontally and the Y-axis vertically, as illustrated below:

The x-axis increases to the right, and the y-axis increases downwards. The convention used for coordinates notation is (x, y), you may remember this from math classes. The "reference" position of any object is the top-left corner of its "bounding box", even if the object does not have corners. For example:

This means that if a rectangle is said to be located at < 300,300 >, its top-left corner is located at < 300,300 > on the canvas.

NB. In the file "mydraw.html" you can customise the height and width of the canvas to your needs. You can find this inside the < OBJ > tags.

Defining colors

For any dot, line, box or filled shapes you draw, you can specify its line or fill color. Suppose the canvas object in your JavaScript code is called canvas, on which you'd like to draw a 100 pixels high and 150 pixels wide dark blue rectangle at < 250, 200 >, then simply insert the statements:

canvas.setColor("darkblue")
canvas.drawRect(250,200,150,100)

The color "darkblue" is a color on the RGB system that is used in the SVG standard. Here is a listing of SVG colors. The method (function) "drawRect" is one of many basic drawing functions that are defined in svg_jsgraphics.js that you can use to build your drawing. We introduce these functions in the next section.


Graphical functions

In your Javascript code, you can use functions that are already defined for you to draw primitive elements such as lines and shapes, as well as color them using the coloring method as shown in the previous section. These functions require input information (function parameters) in order to create the line/shape that you want. We list these in the following, with annotations of what parameters each function needs to produce an output.

All of the draw* methods draw an outline of the specified shape, while the fill* methods draw the shape and fill it with the current color. When specifying the width and height parameters for the draw* methods, you should specify 1 pixel less than what you desire (the method draws a border around the width and height specified). However, for the fill* methods you should use the exact pixel-size.

If the x or y parameters to these methods are negative or outside the bounds of the screen (800 wide and 550 high), the shapes will not be displayed on the screen.

You may also use different stroke sizes and various polygons using other methods available in svg_jsgraphics.js. Have a look at the full collection of functions, each of which are clearly documented similar to the functions defined above, and use them to your artistic advantage! Look at this example code to help you get started.

 

During the Lab

Part I: Obtain the necessary files

Download mydraw.html, mydraw.svg, mydraw.js and svg_jsgraphics.js into your current working directory, for example Z:\artlab.
To download the files, right click on the link, choose Save Link As ..., and choose the directory you want it to be saved to.

Note that mydraw.html is simply a webpage, and you can edit it to your liking. In this file you will find < OBJ> tags, which defines the canvas object that displays your drawing. The JavaScript program that you will use to create your drawing is contained in mydraw.js. To see a quick example of how it should work,

  1. open mydraw.js using wordpad (notepad seems to show it in a funny way)
    To do that, right click on the file name, and choose Open With -> Choose Program. Then from the list choose wordpad.
  2. copy the example code between the
    // DRAW IN HERE ***************************************************************




    // ****************************************************************************
    in the mydraw.js file.
  3. Then open a new firefox, and do:
    File -> Open File
    and choose mydraw.html from your Z:\ directory.
It should show the bull's eye.

 

Part II: A first drawing

In this part you are to create an elementary drawing using Javascript. Using the basics described above (in the "Before the Lab" section), express your creativity by putting together various shapes, lines and colors to form a JavaScript illustration. Here are some basic examples.

Spend a couple of minutes exploring your creative side.  Experiment with the size and placement of your shapes and try adding some new ones.

Here are things you can try:

As a minimum, your program must display these requirements:

  1. One of each of the following shapes:
    • circle or oval
    • square or rectangle
    • line
  2. At least one of the shapes must be painted with a thick line.

 

Deliverables

  1. Demonstrate your graphics program to the lab TA. As stated in Part I step 6, your program must display at least the following requirements:
  1. The lab will be marked as follows: Part I: required shapes (3 marks), at least one shape painted with a thick line (2 mark), creativity (5 marks).

 

Reference Links