HTML5 Graphics and Canvas


Overview/Description
Target Audience
Prerequisites
Expected Duration
Lesson Objectives
Course Number
Expertise Level


Overview/Description
HTML5 and the canvas provide a significant improvement to graphic capabilities on the web. The canvas can be used for interactive or very details drawing within a web page and SVG can be used to ensure the quality of your images are not lost due to scaling on all screen sizes. In this course, you'll learn the fundamentals of using both SVG and the HTML5 canvas and how they'll allow your web site to scale and dynamically display or draw graphics.

Target Audience
Web designers or developers who need to have fine or interactive control over graphics on an HTML5 web page

Prerequisites
None

Expected Duration (hours)
2.1

Lesson Objectives

HTML5 Graphics and Canvas

  • start the course
  • describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
  • add an SVG drawing to an HTML5 page that draws a line
  • use SVG to draw a rectangle in an HTML5 document
  • describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
  • use SVG to draw circles and ellipses in an HTML5 document
  • use SVG to add polyline drawings in an HTML5 document
  • use SVG to add text to an HTML5 document
  • describe how to rotate SVG objects in HTML5
  • work with SVG to place text on a path in an HTML5 document
  • add transparency to an SVG object in an HTML5 document
  • describe the HTML5 Canvas and why it would be used
  • use the canvas in an HTML5 document
  • apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
  • describe how to move the canvas in an HTML5 document
  • describe how to rotate the canvas in an HTML5 document
  • use HTML5 to draw lines on the canvas
  • use HTML5 to render text on the canvas
  • draw rectangles on the canvas using HTML5
  • use HTML5 to draw arcs and curves on the canvas
  • describe how circles can be drawn to the canvas using HTML5
  • perform canvas operations to load and display a bitmap graphic in an HTML5 document
  • set the color of the canvas using HTML5
  • use HTML5 to place an image on the canvas
  • describe how gradients can be created on a canvas in an HTML5 document
  • use HTML5 to clear the canvas
  • work with the HTML5 canvas to track objects
  • describe how to track mouse coordinates in an HTML5 canvas
  • describe how to create basic animations using the HTML5 canvas
  • perform object rotation in HTML5 canvas
  • how to add graphic on an HTML page

    • Course Number:
    wd_htme_a09_it_enus

    Expertise Level
    Intermediate