TOPIC 1: WHAT EXACTLY IS A CANVAS?
When an artist or a painter sits down with a blank canvas, they can draw and create almost anything their minds can imagine. Of course, as a video game designer, when you sit down in front of a blank screen (or canvas), it works the same way. You can design almost anything your mind can imagine.

The basic definition of a canvas is a blank but sturdy piece of fabric stretched over a piece of wood. Artists use it to paint because the fabric is so strong. In fact, true canvas comes from the strong fibers of a cannabis plant, which is where the word originally came from (Latin “cannabis” became English “canvas”). Over time, canvas has also come to mean the foundation on which something is built, drawn, or designed.

TOPIC 2: HOW DOES THIS RELATE TO CODING?
Canvas is an HTML5 element with an opening and closing tag that looks something like this. We call it an element because it requires an opening and a closing tag with something inside, sort of like the SCRIPT element you learned how to write in Learning Goal #5. In most cases, the canvas element is supposed to work with JavaScript so that designers can create some kind of interactive, two-dimensional objects inside of a blank space. Just keep in mind that like an artist canvas, an HTML5 canvas is only a container or a place where our graphics can be placed. The Canvas element doesn’t actually do anything by itself unless you tell it to.

So now that you have a pretty good idea of what the canvas is, you need to see how it actually works in HTML. Click here to experiment with the HTML Canvas before we get into the mind-blowing challenges of the lesson.

Today’s Daily Design was created for three reasons. First, to show you the kinds of things that can be done in Canvas. Second, to show you the kinds of codes we’ll be working with over the next few weeks. And third, to really, really challenge you. Most of you will get frustrated at some point over the next 60 minutes and that’s completely understandable. Some of you will get frustrated a lot. But you will NOT be allowed to quit for 60 minutes. You will be pushed to work through whatever temptations you have to give up or to tell yourself that you’re not smart enough or not good enough.

The teacher can tell you plenty of stories about overcoming obstacles in work, but this is ultimately about determination. Out of more than 400 students who have taken this class in the last four years, only five people have ever completed Challenge #4 within the 60 minutes. That includes some of the best and brightest. This is the kind of moment that leads every student to at least one or two victories and also allows some students to shine a little brighter than they did before.

All students will begin with Design Challenge #1 and must be approved before they can start the next design challenge. Follow the directions for Design Challenge #1 then let the teacher know when you think you’ve got it done.

DESIGN CHALLENGE #1:
BUILDING A DIAMOND
(Beginner)

Open a new Notepad document and save it as “lesson1_fulldiamond.html” in your “LG6_canvasjs” Folder, then copy this code and paste it into your Notepad. Your challenge is to look through the code and see if you can create a simple diamond with four corners that looks like this. If you find the pattern, you can solve the challenge.

DESIGN CHALLENGE #2:
DIAMOND CORNERS
(Intermediate)

Open a new Notepad document and save it as “lesson1_diamondcorners.html” in your “LG6_canvasjs” Folder, then copy this code and paste it into your Notepad. You’ll notice that there are four empty triangles on each of the four corners. These can be filled by connecting more coordinates inside the canvas. Figure out how the first triangle was formed on the top right corner of the canvas. And once you’ve got the idea, fill in the other three corners with different color triangles so that it looks something like this. If you find the pattern, you can solve the challenge.

DESIGN CHALLENGE #3:
REGULAR CHECKERBOARD
(Intermediate)

You’ve now had a chance to build simple, triangular shapes on a canvas. What you’ve done so far hasn’t been very fancy, but you should have a basic idea of how a canvas works in HTML5. Now the time has come to build an actual game board inside of a canvas. Open a new Notepad document and save it as “lesson1_checkerboard.html” in your “LG6_canvasjs” Folder. Open this incomplete game board, view the source, then copy/paste the code into your Notepad. Your challenge is to see if you can find the pattern and complete the checker board with the time we have left. Of course, if you finish the first game board, you’ll be given a more challenging game board to work on while others continue working on their own challenges.

DESIGN CHALLENGE #4:
TRIANGLE CHECKERBOARD
(Advanced)

This is the most challenging design you’ll do for the lesson. Open a new Notepad document and save it as “lesson1_triangleboard.html” in your “LG6_canvasjs” folder. But in order to start this challenge, you’ll need the teacher to show you the hidden code. Raise your hand when you’re ready for the code.

DESIGN CHALLENGE #5:
VICTORY SUPPORT
(Advanced)

If you’ve gotten this far, you should pat yourself on the back. For most in the class, getting this far is like climbing a mountain. Share your skill with someone else in the class who seems to need it most. Go around the room and be a support for your classmates. When you’ve given a few minutes or more of your time to help, come back to your seat and create your own pattern with Canvas. Be as creative as you can.