Training Courses

HTML Canvas : Introduction

  5 reviews

Two Day Course


Out of all the new HTML5 features, the Canvas tag and its associated JavaScript API are the most graphically rewarding. Advertisements, animations, applications, games, and nearly anything else that was once the domain of plug-ins like Flash and Java can be now created with native HTML5.

This two day course covers everything from drawing basic shapes to creating interactive animations and is the ideal course for anyone who wants to start building native HTML5 Canvas applications immediately. You should have a working knowledge of HTML & CSS basics. Knowledge of Javascript and/or jQuery fundamentals would be an advantage but not essential.

  • Private Courses

    One to one tuition or a private group with just your colleagues. Your choice of duration, content and location. We can train at one of our centres or onsite with you wherever you are located.

    We offer a free consultation service to help work out every detail and build the perfect course for you.

    From £499 + VAT per day

    Get A Free Consultation & Quote

Course Outline


    • The canvas tag
    • Fallback content
    • Concepts
    • API syntax primer
    • The rendering context
    • Testing and checking for support
    • Canvas template

    Lines, strokes and rectangles
    • Examining a basic draw template
    • Beginning and ending paths
    • Picking up the pen
    • Drawing straight lines
    • Changing stroke weight and colour
    • Using line caps and mitres
    • Rectangles
    • Clearing the Canvas area
    • Using RGBA and global alpha

    Other shapes
    • Creating ovals
    • Creating triangles
    • Calculating more complex shapes
    • Bezier and quadratic curves
    • Drawing text

    Re-usable code
    • Object orientation
    • Syntax
    • Properties
    • Providing methods using prototypes
    • Creating a grid drawing aid
    • Building re-usable shapes

    Drawing images
    • Using images on the same page
    • Using images on other domains
    • Using content from another canvas
    • Creating an image from scratch
    • Drawing the image
    • Scaling the image
    • Slicing the image

    Questions and answers

    Colours and fills
    • Colour names
    • Hexadecimal colours
    • Controlling alpha with RGBA and global alpha
    • Creating gradients - linear, radial and custom
    • Creating and applying patterns
    • Creating shadows

    • Saving and restoring states
    • Translations
    • Rotating
    • Scaling
    • Skewing
    • Flipping

    • Combining and punching shapes
    • Exploring the many global
    Composite Operations
    • Using Clipping Paths and masking

    Creating animations
    • Clear, save, draw, restore
    • Controlling an animation
    • Defining parameters and conditioners
    • Creating a screen wrap or ticker animation
    • Animation workshop

    Layering techniques
    • Using multiple Canvases
    • Positioning
    • Managing layers

    • Building a project or game using jQuery and the Canvas API
    • Listening and reacting to keyboard events
    • Binding to Mouse events

    Related topics and APIs
    • Drawing video onto the Canvas
    • Animating Canvas video content
    • Re-skinning video controls
    • Local storage
    • HTML Canvas libraries

    Questions and answers
Experience + Flexibility

We know training inside out. We can advise you on all the options to make sure you get the best possible course.

Tell us you need to cancel 5 working days before your course and there’s no charge. Great for your peace of mind.

Our trainers bring their years of industry experience into the classroom. You'll leave confident and prepared.

The smallest class size in the industry. More one on one time with the trainer and a less intimidating group size.

Tell us which you use and it'll be booted up and waiting with the latest software when you arrive.

We provide a lovely onsite lunch so you can relax. We can cater for any dietary requirement with no fuss.

Comfort + Location
Reputation + Feedback

Our Clients

We've worked very hard over the last 20 years to grow our business through personal recommendations.

When you attend a course we ask you to tell us how it went. We use your feedback to help us improve our courses.

We publish all our customer satisfaction stats live on our site (good or bad) because we want everyone to know just how highly you rate us every day, every week and every year.

We know that choosing the best course can be difficult, maybe the thoughts of the 14054 other clients we've asked will give you the inspiration to join us too.

The most recent comments from attendees of our courses are shown below. We reckon they will give you a pretty good indication of how they think we perform.

  Client Ratings

Attendees surveyed14054
  Trainer Knowledge9.8 / 10
  Trainer Materials9.6 / 10
  Trainer Preparation9.8 / 10
  Overall Trainer Score9.7 / 10
  Centre Lunch9.6 / 10
  Centre Staff9.9 / 10
  Overall Centre Score9.7 / 10
  Overall Experience9.6 / 10
  % Who Would Recommend Us99.7%

  Recent Feedback

"The overall atmosphere was great, trainer was great also and i've gained a lot from the course."

"Patient and flexible approach to learning. Helped put learned concepts into a day-to-day context"