Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Get creative with the HTML5 Canvas

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Videos (2h 60m)
    • Welcome

      2:47
    • What is the HTML5 Canvas?

      4:10
    • Canvas Basics: Setting up the Canvas

      6:54
    • Canvas Basics: Scripting & drawing rectangles

      10:00
    • Canvas Basics: Understanding the Canvas co-ordinates

      2:19
    • Canvas Basics: Lines & paths

      11:48
    • Canvas Basics: Line widths & matching to pixels

      5:22
    • Canvas Basics: Corners & miters

      6:51
    • Canvas Basics: Arc's & circles

      9:26
    • Canvas Basics: Adding canvas text

      7:43
    • Canvas Basics: Removing sections of the canvas

      6:24
    • Canvas Basics: Gradients

      9:21
    • Canvas Basics: Adding images to the canvas

      9:27
    • Canvas Basics: Patterns & shadows

      8:23
    • Stepping It Up: Bezier & quadratic curves

      10:10
    • Stepping It Up: Save & restore

      6:39
    • Stepping It Up: Scale, rotate & translate

      5:04
    • Stepping It Up: Canvas transformations

      7:28
    • Stepping It Up: Working with pixels

      10:30
    • Challenge intro: Converting images to greyscale

      3:17
    • Challenge: Converting images to greyscale

      9:43
    • Stepping It Up: Looping

      9:49
    • Stepping It Up: Animating

      5:29
    • Final project: Introduction

      1:26
    • Final project: Draw Mickey Mouse!

      7:11
    • Thank you

      2:10

About This Class

Learn how to draw amazing graphics and animations using the HTML5 Canvas!

The Canvas is a HTML5 element we can use to add a drawing area to our websites, applications or browser based games. The Canvas is packed full of features to create some amazing graphics.

We begin this course with the basic features including:

  • Setting up the Canvas and creating fallback content for unsupported browsers
  • Scripting 
  • Drawing shapes such as squares, rectangles, arc's and circles
  • Lines & paths
  • Line widths and matching to pixels
  • Working with different types of corners and miters
  • How to remove sections of the canvas
  • Adding Canvas text and styling
  • Color fills, patterns, gradients and shadows

Then we step things up looking at more advanced techniques such as:

  • Bezier & quadratic curves
  • How to save and restore the Canvas
  • Scaling, rotating and translating drawings
  • How to use transformations
  • Accessing pixel data to both draw to the canvas and also manipulate images.
  • Use loops for repetitive tasks
  • Adding canvas animations

The uses for the Canvas is only limited to your imagination! Everything you need to complete the course is included or free to use, there is no extra software, subscriptions or purchases etc to complete or take this course.

So are you ready to take your skills to the next level?

Join me now and I look forward to having you on board!

85

Students

--

Projects

Chris Dixon

Web Developer & Online Teacher

Hello, My name is Chris and I am a web developer and online teacher. I am passionate about what I do and about teaching others. I have started various online and offline businesses.

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website...

See full profile