HTML5 Graphics and Canvas

This course is included in our On-demand training solution.

Overview

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

120 min.

Course Objectives

Course Introduction

Using Scalable Vector Graphics (SVG) in HTML5

  • describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
  • Drawing Lines Using SVG in HTML5

  • add an SVG drawing to an HTML5 page that draws a line
  • Drawing Rectangles Using SVG in HTML5

  • use SVG to draw a rectangle in an HTML5 document
  • Creating Rounded Corners Using SVG in HTML5

  • describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
  • Drawing Circles and Ellipses Using SVG in HTML5

  • use SVG to draw circles and ellipses in an HTML5 document
  • Drawing Polylines Using SVG in HTML5

  • use SVG to add polyline drawings in an HTML5 document
  • Creating SVG Text in HTML5

  • use SVG to add text to an HTML5 document
  • Rotating SVG Graphics in HTML5

  • describe how to rotate SVG objects in HTML5
  • Placing Text on a Path Using SVG in HTML5

  • work with SVG to place text on a path in an HTML5 document
  • Using Transparency with SVG in HTML5

  • add transparency to an SVG object in an HTML5 document
  • Using the Canvas in an HTML5 Document

  • describe the HTML5 Canvas and why it would be used
  • Setting up the HTML5 Canvas

  • use the canvas in an HTML5 document
  • Sizing the Canvas to the Screen in HTML5

  • apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
  • Moving the Canvas in an HTML5 document

  • describe how to move the canvas in an HTML5 document
  • Rotating the Canvas in an HTML5 document

  • describe how to rotate the canvas in an HTML5 document
  • Drawing Lines on the HTML5 Canvas

  • use HTML5 to draw lines on the canvas
  • Rendering Text on the HTML5 Canvas

  • use HTML5 to render text on the canvas
  • Drawing Rectangles on the HTML5 Canvas

  • draw rectangles on the canvas using HTML5
  • Drawing Arcs and Curves on the HTML5 Canvas

  • use HTML5 to draw arcs and curves on the canvas
  • Drawing Circles with the HTML5 Canvas

  • describe how circles can be drawn to the canvas using HTML5
  • Loading and Displaying Bitmaps on the HTML5 Canvas

  • perform canvas operations to load and display a bitmap graphic in an HTML5 document
  • Setting the Canvas Color in HTML5

  • set the color of the canvas using HTML5
  • Placing an Image on the HTML5 Canvas

  • use HTML5 to place an image on the canvas
  • Creating Gradients on the HTML5 Canvas

  • describe how gradients can be created on a canvas in an HTML5 document
  • Clearing the HTML5 Canvas

  • use HTML5 to clear the canvas
  • Tracking Objects on the HTML5 Canvas

  • work with the HTML5 canvas to track objects
  • Tracking Mouse Coordinates on the HTML5 Canvas

  • describe how to track mouse coordinates in an HTML5 canvas
  • Creating Basic Canvas Animations in HTML5

  • describe how to create basic animations using the HTML5 canvas
  • Rotating Objects on an HTML5 Canvas

  • perform object rotation in HTML5 canvas
  • Exercise: Working with HTML5 Graphics

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.