canvas tag

Class Wednesday, March 29, 2017

 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:

 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

Please do the following tutorials on W3Schools.com by clicking on the tutorial link in each section and following the steps.

Draw a rectangle

  1. Tutorial link
  2. Can you make the size of the canvas container larger by increasing the width and height values?
  3. Can you make the red rectangle larger by increasing 150 and 75?
  4. Can you shift the red rectangle by changing its starting position from 0,0 (top and left) to some other set of numbers?
  5. Can you change the color of the red rectangle to something else?
  6. Finally, see if you can add a shadow to your rectangle by grabbing some code from here

Draw a line

  1. Tutorial link
  2. Can you change the starting point of the line (the moveTo value) from 0,0 to 0.50? Then, change the lineTo value (the end point of the line) from 200,100 to 200, 50. What does the line look like now? Why did we begin with 200,100? What are those numbers the same as?
  3. Try drawing another line. First, copy and paste ctx.moveTo(0,0); ctx.lineTo(200,100); and ctx.stroke(); right below the first line. Change the moveTo and lineTo values to create a new line that intersects the first line somewhere.
  4. Finally, check out the different line styles here.

Draw a circle

  1. Tutorial link
  2. Change the circle radius by changing the number 40 to something bigger or smaller. What happens if you make it bigger? Why?
  3. Change the circle location from the middle of the canvas by changing the x and y coordinates (95,50) to some other numbers.
  4. If you wanted to make your circle larger and not have it be cut off, what could you do?

Draw some text

  1. Tutorial link
  2. Can you change the font? (Try Comic Sans, Lucida, Georgia, Times New Roman, or Verdana)
  3. Can you change the text size?
  4. Can you change the message from Hello World to something else?
  5. Can you move the text somewhere else on the canvas by changing 10,50 to some other numbers?
  6. Extra: check out how to create multi-colored text with canvas and some JavaScript

More canvas things: check out this canvas reference and click on anything that interests you

Basic animation