Canvas

  

1. Basic Shapes

Copy this script into the editor.


Save as basic.html.

Go to folder and open basic.html in a browser.


Change code, save in folder and refresh in browser.





Change code, save in folder and refresh in browser. Note the addition of a canvas style and larger canvas.





Add Text labels





Activity

Label the other shapes.

2. Structured Canvas

Copy code to editor, save in folder and refresh in browser. Note the more structured code layout.





Activity

Label the shapes.

Copy code to editor, save in folder and refresh in browser.




Finish the robot


3. Functions

Call a Function. The values inside the () brackets are called parameters.





Add more parameters.




Activity

Draw these squares. Start at 25,25 and each square is 150,150

4. Loops

Change to Circles.



Add a for () loop.





Add a while () loop.




Activity

Draw these circles.
Add xpos and ypos variable.


5. Conditions

Use an if else statement.



Modify the Functions Activity.



6. Random

Draw random circles.




Modify the script to draw random circles with random colours.
This is done by choosing random values for R G B.



Top Home