Unit 5: Canvas Painter
Introduction:

Today we are going to be building a drawing app in App Lab.

Along the way, we’ll be introduced to a couple new ideas and concepts, but for
the most part, we will be combining old skills.

At this point, you all know most of the core concepts of programming.

As we move forward, we’ll spend more time thinking about interesting ways to
combine them.
Canvas:

Today you will build an app that uses Canvas, a feature provided by
JavaScript.


Canvas is simply a UI element that you can add to your screen in design
mode.


We are going to combine our knowledge of arrays and conditional statements with
this new feature.
Simply drag the icon to the screen and give it an appropriate ID.
With Canvas you can create simple geometric figures like lines, circles and
rectangles.

Combine Canvas with other programming concepts and you can do a lot of
interesting things.
setFillColor and setStrokeColor:


Two commands you will use are setFillColor and setStrokeColor.

setStrokeColor is used to determine the color for the outline of the shape

setFillColor is used to determine the color of the inside of the shape
The circle to the right has a stroke color
of yellow and a fill color of black.
Event Parameter:

You will also learn more about the event handler we’ve previously used to
figure out which key a user pressed.

The event parameter can tell you whether or not a certain key was
pressed like shift or Alt. The event parameter can also tell you where the
mouse was located when you clicked somewhere on the screen.

You will use some of this information provided by the event parameter to make
your app much more interesting.
Events and Arrays

You can store the event parameters inside an array so you can use the
information contained within each event to recreate your drawing or
maybe create some different visual effect with your original drawing.


You will be combining your knowledge of arrays and for loops to create
all the visual effects you will see today.


Use the dot ( . ) operator to access elements within the event itself.
Also you will be using nested loops in this lesson. Loops within loops
Make sure to read all of the direction when completing this lesson.