MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

HTML5: Graphics and Animation with Canvas

Course Summary

Introduces the technical concepts behind the Canvas in HTML5 and shows how to perform drawing operations directly in a web page.       

  • +

    Course Syllabus

       Using the exercise files
       Using the HTML5 Canvas element in the real world
    1. Examples of Current HTML5 Sites
       Real-world example: CanvasMol
       Real-world example: Raphaël-JavaScript Library
       Real-world example: The Wilderness Downtown
       Real-world example: Sketchpad
       Real-world example: Pirates Love Daisies
    2. Setting Up Your Workspace
       Installing the tools
       Exploring the Canvas examples used in this course
    3. Introducing the Canvas Element
       Introducing the Canvas tag
       Understanding the differences between Canvas and SVG
    4. Understanding the Canvas Element and 2D Drawing API
       Identifying the Canvas element's methods and properties
       Using the Canvas drawing context
    5. Basic Canvas Drawing Techniques
       Setting and using colors and styles
       Drawing basic shapes: Rectangles and lines
       Understanding the Canvas state
       Drawing complex shapes: Arcs and paths
       Drawing complex shapes: Bézier and quadratic curves
       Rendering text
    6. Complex Canvas Drawing Techniques
       Creating shadows
       Drawing with patterns
       Drawing with gradients
       Using clipping paths
       Drawing images and video
    7. Advanced Canvas Drawing Operations
       Transforming objects using the translate tag
       Scaling objects with the scale transformation
       Rotating objects with the rotate transformation
       Applying a custom transformation
       Compositing in Canvas using globalAlpha
       Manipulating raw pixels
    8. Building Practical Examples
       Building an image slideshow control
       Using smooth transitions in a slideshow
       Creating a basic animation
       Creating animation with double buffering
       Incorporating Canvas into a real page


Course Fee:
USD 25

Course Type:


Course Status:



4 - 5 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top