Getting Started

You will be using another Github classroom repo for this lab. To get started, you'll need to create a new repository for the lab with the stencil code and clone this repository. This link will take you through these steps:

Stencil code!

Canvas

The <canvas> element lets you draw 2D graphics using Javascript. This will come in handy when you're working on Maps!

For this assignment, you'll need to learn how to do 3 things:

  • Draw a line (to draw the toggle settings pane)
  • Draw a rectangle (to mark certain settings as selected)
  • Draw text (to draw the text on the toggle settings pane)

This tutorial has code snippets for all of these operations, and we recommend referencing this and other online resources when completing the lab.

When drawing on a <canvas> element, there are a couple of things to be aware of:

  • A canvas has two 'sizes'. One is the size of the canvas dimensions used for drawing; these are the .height and .width properties of the canvas DOM element. You can set these using JavaScript:
      const canvas = $('#canvas')[0]; // Getting a reference to the <canvas> element that has an ID of 'canvas'
      canvas.width = 500;
      canvas.height = 300;
    The other is the CSS style size of the <canvas> element, which are the style.height and style.width CSS attributes. This corresponds to the physical size of the canvas on the screen in pixels. The simplest way to deal with this disconnect is to set the physical size and drawing size of the canvas to the same dimensions so you don't have to worry about conversion. You can check out this StackOverflow post if this is confusing to you.
  • Some math is required to figure out which tile was clicked based on a click event. When you handle a click event, you can get the x and y position of the click on the screen. To figure out which tile was clicked, you'll need to convert this x and y position to a position that is relative to the canvas. You can do this by using the offsetLeft and offsetTop properties of the canvas element. There is an example of how to do this in canvas.js.
  • Batch canvas calls when drawing lots of lines. When drawing a line in Canvas, you will typically call 'beginPath', then 'moveTo' and/or 'lineTo', then finally 'stroke'. However, if you want to draw a lot of lines, it is best to call 'stroke' once. This means you should call 'beginPath' once, then 'moveTo' and 'lineTo' a number of times, and then call 'stroke' once at the end. Calling 'stroke' once for each line will cause you performance issues.

The Assignment

In this lab, we're going to create a toggle settings pane that allows for users to turn the two different autocorrect generator algorithms on and off, to create an Autocorrector. The finished toggle pane will look like this:

toggle pane with options to turn whitespace and prefix on and off

We've left many TODOs in the canvas.js file that point out where and how to make these changes.

Finishing Up and Check Off

You should open up js/canvas.js and finish filling out all the TODOs. After that, you can look at and debug your Autocorrect toggle settings pane using Canvas code! Once everything's working and you're ready to get checked off, call the TA look over your lab.