The basics of creating graphics objects to a screen relies on setting the type, shape, size, position, and color before on the artist’s canvas before adding to the screen. Using the geometric concepts, and the concept of getWidth() and getHeight(), multiple graphic objects can be created in JavaScript.

Objective

Students will be able to…
* Create graphical JavaScript programs that draw shapes on the canvas
* Locate points on the graphics canvas using (x, y) coordinates

Activities

These are all the activities included in the lesson.

Activity

3.5.1 Graphics

Video

3.5.2 JavaScript Graphics Quiz

Quiz PRINT QUIZPRO

3.5.3 Graphics Hello World

Example

3.5.4 Blue Circle

Example

3.5.5 Red Rectangle

Example

3.5.6 8 Ball

Example

3.5.7 French Flag

Exercise REVIEW FOR CLASS

3.5.8 Snowman

Exercise REVIEW FOR CLASS

Open the Google Doc for this class. In your own words at the TOP of the Doc, explain what you learned today and how it can help you write programs.

SANDBOX–create a new programs that uses at least one WHILE LOOP and IF ELSE statement.  Include at least 2 of your own functions. Show me.

Leave a Reply

Your email address will not be published. Required fields are marked *