Building HTML5 Canvas projects from scratch

Laurence Svekis, Web technology Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Videos (1h 47m)
    • Canvasprojects

      2:37
    • 1 HTML5 Canvas Projects Course intro

      4:00
    • 2 How to use this course

      2:11
    • 3 Basic Canvas Setup for project

      2:30
    • 4 Setting project variables

      4:36
    • 5 How to draw the ball

      2:43
    • 6 requestAnimationFrame and clear frame for animation

      3:12
    • 7 create boundaries for ball change directions

      6:44
    • 8 random color for the ball

      2:32
    • 9 Adding cool effects to the project

      5:33
    • 11 Setup HTML5 Form type and Canvas

      7:18
    • 12 Setup project variables for drawing on canvas

      4:21
    • 13 Create addEventListeners and add functions for interaction

      5:21
    • 14 How to get the mouse position on canvas

      8:37
    • 15 Drawing on the canvas paths and lines

      4:49
    • 16 Using dynamic colors and marker widths to draw on canvas

      4:56
    • 17 Clear canvas start again

      4:09
    • 20 Add jquery to send AJAX

      2:12
    • 18 Save to base64 image code create new image from canvas content

      5:19
    • 19 Project Tweaks slider

      3:02
    • 21 Using AJAX to send image data and PHP to create images on the fly

      5:51
    • 22 Creating images on the fly storing them to the server

      4:45
    • 23 Code overview and summary

      7:54
    • 25 Cursor style Tweak

      2:05