Web browsers have come a long way from their humble text origins to being able to display visually appealing graphics and animations. In the early 2000’s, browsers began to support an element called a “canvas,” which is exactly what it sounds like – a space for developers to create graphics, animations, and other visualizations.

We’re going to learn about the CodeHS canvas and some basic graphics in this tutorial.

Navigating the CodeHS canvas

The CodeHS canvas is essentially a blank rectangle with horizontal (x) and vertical (y) coordinates that we use to place our graphics objects. Click through the slides below to see how the coordinates are mapped onto the canvas and learn about two functions you will use often!

Remember, x and y both increase as you move away from the top left corner, which is different than the typical x-y coordinates in math, and the functions getWidth() and getHeight() will return the dimensions of the canvas.

Below is an example of a live CodeHS canvas! Drag your mouse around it to see the coordinates of where your mouse is on the canvas. See if you can match the width and height that is printed beneath.

Let’s get some graphics on there

With the CodeHS canvas and graphics library, it’s very easy to add graphics and edit their properties (e.g. size, position, color, etc). We’ll discuss the following graphics objects right now: text, circle, rectangle, and line. All of them are created in a very similar way:

1. We create the object
2. We add it to our canvas
3. We adjust the properties (optional, and can come before #2)
   
   

Creating the Object:
Declare a variable and initialize it with the word “new” and the type of object you’re creating – Text(), Circle(), Rectangle(), or Line(). The required arguments for each of them vary by object; see the code below for details:

var textObject = new Text(text, font);
var circleObject = new Circle(radius);
var rectangleObject = new Rectangle(width, height);
var lineObject = new Line(x1, y1, x2, y2);

Adding it to the Canvas:
Once the object is created and stored in a variable, all we need to do is use the function add(graphicVariable) to add it to the canvas! The code below adds all four objects created above to our canvas.

add(textObject);
add(circleObject);
add(rectangleObject);
add(lineObject);

Check out the following example to see this in action! After you press Run, answer these questions:

• When you press Run, what do you see on the canvas? Do you see all of the graphics?
• What do we need to adjust in order to clearly see and distinguish all of our objects?
• What other properties might you want to adjust (one that is not already included as an argument in the creation process)?

Properties are important!

As you can see above, just adding the graphics objects to our canvas ends in a confusion of black shapes, partially in view. In order to really use these objects effectively, we need to adjust their properties. The syntax for the these properties all follow the same pattern of graphicVariable.property(arguments). Each object type has its own set of slightly different properties we can change, but almost all of them fall into one of three categories: position, size, and color.

Text

textObject.setPosition(x, y) moves the position of the lower left hand corner of the text to (x, y)
textObject.setText("[New Text]") changes the value of the text to [New Text]

Circle

circleObject.setPosition(x, y) moves the center of the circle to (x, y)
circleObject.setRadius(radius) changes the radius of the circle, where radius can be any real number

Rectangle

rectangleObject.setPosition(x, y) moves the position of the upper left hand corner of the rectangle to (x, y)

Line

lineObject.setPosition(x1, y1) changes the starting position of the line to (x1, y1)
lineObject.setEndpoint(x2, y2) changes the ending position of the line to (x2, y2)

All of the objects also share the following properties:

graphicVariable.setColor(Color.color) where Color.color can be one of 10 main colors, like Color.red, Color.blue, Color.green, etc.
graphicVariable.getX() gets the x-coordinate of the position of the object
graphicVariable.getY() gets the y-coordinate of the position of the object

Take a look at the following example to see how these properties can be used in a program. After running the code, try completing the modifications below:

• Move the circle to the left, so that it is not touching the rectangle
• Change the color of the rectangle to cyan
• Change the text to be the name of a food item that you’ve eaten in the last 24 hours
• Move the line 20 pixels lower on the canvas and make it 30 pixels longer

With a few shapes and properties, the creations are endless! Here’s a rainbow to make you happy.

Now it’s your turn…

What can YOU create?? The blank canvas awaits your creative mind and code! To start, try drawing a rectangle, circle, and a line that don’t overlap and fit on the canvas.