Today’s goal:

• Learn about and practice using the canvas tag, which allows you to add dynamic graphics and animations to a webpage with HTML5 and JavaScript

 Today’s featured site:

• http://craftymind.com/factory/html5video/CanvasVideo.html – The canvas tag is used so we can blow up this video! (Check out some info here  on how this was created).

 About the Canvas Tag

• What is the canvas tag?
  • From W3Schools: The canvas element is a container for graphics that are created with JavaScript, such as text, images, shapes, etc. The canvas element can draw graphics, be animated, draw text, serve as a container for games, etc.
  • Let’s check out this brief intro .
• Why use it?
  • From Colin Cieloha from Skilled.co: “Canvas technology is amazing because it’s super easy to use. For example, Canvas can draw colorful text to help your message pop on the screen – and you can even animate it! HTML canvas objects can move, too, whether it’s just a few bouncing balls or an intricate animation that tells a story. For designers interested in gaming software, the canvas element is a brilliant choice for building characters, worlds, and then setting it all into motion.
  • Canvas isn’t magic (close, but not magic). You’ll still need a basic understanding of HTML and JavaScript to make these codes work for you the way you want, but the canvas element is simple and easy to use. The HTML canvas element’s purpose is to create graphics, according to lines of script, but it’s only a container. The canvas element draws paths, boxes, circles, text, and helps you to create images. It also provides the user with graphs and charts to order their graphic data designs. To draw graphics, canvas uses a JavaScript context object, which makes it easy and fast to create graphics in your design.”

 Canvas practice

We will learn how to set up the canvas area; draw on it; and add text to it.

1. Open Notepad++ and go to our practice page from Thursday. We left off with adding the canvas tag to define the canvas area on our webpage. Now we must add JavaScript!
2. Let’s add a border to our canvas area so it’s a little easier to see. Add style="border:1px solid #000000;" inside of your canvas tag after the height.
3. First, let’s add some opening and closing script tags right below our canvas tag. Inside the tags, we need to add code to find the canvas area so JavaScript can act on it, and so we’ll use the getElementByID() method that we learned last week. Add var canvas = document.getElementById("myCanvas"); inside of your script tags.
4. Draw on the canvas
   • We’ll create a 2D drawing object on the canvas by adding the following code
     var ctx = canvas.getContext("2d");
   • We’re going to draw a rectangle first. We’ll start by adding a color ctx.fillStyle = "#FF0000"; (the fillStyle property can be a color, gradient, or pattern- the default color is black)
   • To make the rectangle, we’ll use ctx.fillRect(x, y, width, height);

     . How can we make the rectangle be the same size as the canvas area?

   • Let’s change the size of the rectangle to 200 x 150 and also shift its location to 10,50
   • Let’s add a line to our canvas area by adding
     ctx.moveTo(40,50); (defines where the line starts)
     ctx.lineTo(80,150); (defines where the line ends)
     ctx.stroke(); (draws the line)
   • Use ctx.lineWidth = 10; to control the width of the line (add it before the code for where the line begins)
   • ctx.lineCap has three different values to style the line (round, square, butt)
   • Let’s draw a circle by adding
     ctx.beginPath(); (begins path for circle)
     ctx.arc(240,180,60,0,2*Math.PI); (creates circle- x,y coordinates for center, radius value, start 0 and end angles 2*Math.PI)
     ctx.stroke(); (draws circle)
   • Let’s label our code by spacing out the rectangle, line, and circle code and adding a single line comment above each block of code. Example: //rectangle
5. Add text to the canvas
   • Let’s begin by adding
     ctx.font = "30px Arial"; (defines font size and font family)
     ctx.fillText("Hello World", 10, 250); (defines text content and position x,y)
   • How can we change the color of the text?
6. Code help
   Something not working? Click here to download the correct code  and check it against your own code.
7. More canvas
   Let’s check out this W3Schools reference page  to see what else you can do with the canvas tag
8. Tomorrow’s class
   Your choice- game tutorials, create a drawing app, or do a self-guided canvas tutorial