Session 3 - Canvas

  

Save and Refresh whenever code is changed.

1. Basics Shapes

  1. This is the basic canvas framework.

  2. Copy this script into the editor.

  3. Save as basic.html.

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

  5. Change code, save in folder and refresh in browser.




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




  7. Add Text labels



Activity

Label the other shapes.


2. Structured Canvas

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





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



  3. Finish the robot

3. Functions

  1. This is similar to the video example.
    The values inside the () brackets are called parameters.




  2. Add more parameters.




Activity


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


4. Loops

  1. Change to Circles.




  2. Add a for () loop.




  3. Add a while () loop.




Activity

Draw these circles.
Add xpos and ypos variable.


5. Conditions

  1. Use an if else statement.


  2. Modify the Functions Activity .



6. Random

  1. Draw random circles.



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



Top Home