Many students end up using Canvas for later projects. This exercise explores how Canvas works at a basic level. It will give you an introduction to using canvas to draw shapes on a page.

Take a look at the index.html that has been provided for you. Notice that there is a canvas element that has been included in the body. This is the element that we will be working with. By default, the canvas element has a width of 300px and a height of 150px.

In the practice.js file, we have added an event listener that waits for the document to be loaded before looking for the canvas element.

Create a 2D rendering context:

1. Grab the canvas element by id and save it to a variable
2. Set the height and width attributes of the canvas to 500
3. Call getContext on the canvas with '2d' as an argument and save the return value as ctx

• You will be setting attributes and calling methods on ctx for the rest of this exercise

1. Pick a color (e.g. 'red', rgb(255,255,255), etc. ) to set as the fillStyle attribute for ctx
2. Call fillRect with the appropriate dimensions to draw the rectangle on the canvas
3. Check that everything's working by executing open index.html in your terminal

To draw the circle:

1. Invoke beginPath with no arguments
2. Invoke arc with the appropriate dimensions to draw a circle
3. Pick a color to set as strokeStyle
4. Set the lineWidth attribute to some integer
5. Invoke stroke with no arguments
6. Open index.html in your browser to view it

To fill in the circle:

1. Pick a color to set as fillStyle
2. Invoke fill with no arguments
3. Open index.html in your browser to view it

See here for inspiration. Also review these examples of how to animate your drawings.