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. We are going to combine our knowledge of arrays and conditional statements with this new feature. Canvas is simply a UI element that you can add to your screen in design mode. 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. Use the dot ( . ) operator to access elements within the event itself. You will be combining your knowledge of arrays and for loops to create all the visual effects you will see today. 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.