STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson2”. This is where you will keep all of your files for this lesson.

STEP 2:
Open Notepad++ for the first time, go full screen, and wait for the teacher’s instructions on how to work with this new program.

STOP

STEP 3:
With the teacher, you will create three new documents with Notepad++ called lesson2.html, style.css, and variables.js. All of these documents will be saved to your new “lesson2” folder. After saving these files, take a moment to look inside your “lesson2” folder and see the icons that make each file look different and unique.

STEP 4:
By yourself, copy this HTML code and paste it into your “lesson2.html” file.

STEP 5:
By yourself, copy this CSS code and paste it into your “style.css” file.

STEP 6:
By yourself, copy this JavaScript code and paste it into your “variables.js” file.

STEP 7:
After pasting all three codes into all three files, click the SAVE ALL button at the top of Notepad++.

STEP 8:
Open your HTML file with Chrome or Firefox and make sure you see a light blue canvas with a dark blue background.

STEP 9:
Create a split screen between your Notepad++ and your browser display.

Today’s Daily Design was created so that you can learn how to work with variables and operations inside of an HTML5 Canvas Element. Some of the challenges below will be done with the teacher and others will be done on your own or with a partner.

CHALLENGE #1 (Beginner):
Applied Variables

1. What happens if you remove Line #1 and Line #2?
2. What happens if you change the ID?
3. What happens if you change 2D to 3D?
4. What happens if I change the “x” variable to “f”?
5. What do each of the fillRect numbers represent?

CHALLENGE #2 (Beginner):
Adding Squares
By copying Line 3 and pasting it into Line 4, you can create another square. However, with the same dimensions, that square will just be on top of the other one. Create a second square and move it somewhere else on the canvas by changing the left margin (1st number) and top margin (2nd number). Raise your hand when you’ve completed this.

CHALLENGE #3 (Intermediate):
Four Corners
Now that you have figured out how to set up new squares, try to recreate this example with four squares in four corners. Raise your hand when you’ve completed the challenge.

CHALLENGE #4 (Intermediate):
Repeated Numbers
The teacher will explain how variables can be used as replacements for repeated numbers that you plan to use over and over. The challenge here will come directly from the teacher.

CHALLENGE #5 (Intermediate):
Variables with Color
Erase the code in your variables.js and replace it with this new JavaScript snippet. Look at how the color was changed in all the squares. Your challenge is to figure out how to make each square a different color (like this) instead of having all of them stay the same. When you are finished, leave your squares up on the screen and help someone else nearby until all are caught up.

CHALLENGE #6 (Intermediate):
RGB vs Hex
The teacher will explain how you can use RGB colors instead of Hex Values. Even more importantly, the teacher will show you how to use RGB for making transparent objects. The challenge here will come directly from the teacher.