Code With Me - 1
Step 1. Let’s get started!
1. Let’s get started! In the editor, you’ll find the start of our code. It contains an onload function which means that all the pieces you will soon be adding will be ready to go. If you look closely, you’ll see 3 lines of code. Here’s what they mean!
1.1 The first line is selecting the canvas object from the page by its ID. This is how we’re going to add a picture of Eimmie! The second line is selecting the canvas context, which means this is how we’re going to get Eimmie to move around and cheer. In HTML5, these are the basic building blocks to do any kind of animation or manipulation on the page.
1.2 The third line is called the switchImages function, and this is where we’ll add the code to show the picture of Eimmie!
Step 2. Add an image of Eimmie!
2. First, we want to set the properties in the switchImages function so we can see Eimmie and put her in front of a pretty background. We have already set up an image of Eimmie that you can add by using img.
2.1 Add Eimmie into the canvas by typing img.setAttribute('src',eimmieImage); into the code editor in the switchImages function.
2.2 Next, we’re going to add a background color. Let’s try purple first! To do this, set the fillStyle property of the canvas with code #572a79. Next time, you can change it to whatever color you want.
2.2.1 In the code editor type showCanvasCtx.fillStyle = "#572a79"; in the img.onload function. To change the color replace #572a79 with any color — you can even try typing in the color’s name, such as “pink.”
2.2.2 Add this line immediately below the line that changes the background color. showCanvasCtx.fillRect(0,0,window.innerWidth,window.innerHeight);
2.2.3 To show the image of Eimmie, we need to use the drawImage method. In the code editor, type showCanvasCtx.drawImage(img,0,0,400,450); as the last line in the img.onload function. The first parameter in this method tells it to use the image of Eimmie that we added earlier. The second and third allow you to move Eimmie around the canvas. The last two parameters tell the method how wide and tall the image should appear on the canvas — so you can move the numbers around and watch Eimmie get really tall, really short, or really wide.
Step 3. Teach Eimmie how to cheer!
3. Now it’s time to get Eimmie moving with the click of a mouse. To do this, we will add a mousedown event listener.
3.1 In the code editor, find the onload function and type canvas.addEventListener('mousedown', switchImages, false); as the last line in the function.
3.2 Next add an array or list of images instead of the image of Eimmie. In the switchImages function we want to replace eimmieImage with currentImage++. Here we are using a variable named currentImage which is a number that starts at 0 and determines which image to show. The ++ means every time switchImages is called currentImage will increase by 1.
3.2.1 We only have a few images so we need to check if all the images have been displayed and if they have then we want to start over. This is called an if statement and we want to add it below img.set Attribute in the switchImages function. The logic reads if the currentImage equals the number of images then we want to set currentImage to 0 which will show the images again.
3.2.2 Click your mouse anywhere on the image of Eimmie or the background. Do you see her moving around? Keep on clicking to see what happens!
Step 4. Set a timer to get Eimmie to do a full cheer!
4 The last step is to add a timer to switch the images every 2 seconds.
4.1 In the code editor, we are going to replace the mousedown event handler with another method called setInterval. In the onload function, locate canvas.addEventListener('mousedown', switchImages, false); and replace it with setInterval(switchImages,2000);. The first parameter is the function we want to call when the time is up. The second parameter is the length of time we want to wait before calling our function. It is set to 2000 which is measured in milliseconds (there are 1000 milliseconds in 1 second).