HTML Canvas DEEP DIVE for Beginners

Last week support for Silverlight 5 officially ended, but let’s be real: the Silverlight era ended a long time ago.

At Mix 2011, I saw the potential of the HTML Canvas element: the ability to draw directly onto an HTML element reliably across browsers meant that the plug-in age was over.

Here’s a great tutorial on how to work with the HTML canvas.

HTML canvas allows dynamic scriptable rendering of 2D shapes and bitmap images and we can also make games using those same techniques. We can draw shapes with code and in this HTML canvas deep dive for beginners we will use vanilla JavaScript to draw a single line, and then we take it to the next level! There are a lot of things you can do with lines, for example create a fully interactive self animating vector field that reacts to used input in multiple different ways.

Time stamps:

  • 0:00 Course introduction
  • 01:36 HTML mark-up and CSS styles
  • 02:22 Window onload and document onload
  • 02:59 How to set up HTML canvas with JavaScript
  • 04:32 JavaScript classes and private class features
  • 09:40 Private class methods
  • 10:22 How to draw a line on HTML canvas
  • 12:45 Animation loop with encapsulation (How to use JavaScript bind method)
  • 17:13 Resize event listener (How to make canvas project responsive)
  • 19:31 How to use cancelAnimationFrame method
  • 20:56 Movement patterns with trigonometry
    (How to use Math.sin() and Math.cos() for sine wave and circular movement patterns)
  • 22:29 Mousemove event listener and event object
  • 24:35 Timestamps and delta time
    (Set framerate and periodic events in milliseconds for cross device compatibility)
  • 30:25 How to create a grid on HTML canvas
    (Using nested for loops to map a vector field grid)
  • 33:28 Canvas gradients
    (createLinearGradient and addColorStop methods)
  • 35:40 Rotating lines using trigonometry
  • 37:15 Control points for vector field effect
  • 40:21 Experiment 1: spiral animation
  • 43:22 Experiment 2: dynamic line length
    (how to calculate distance between 2 points with Pythagoras theorem)
  • 47:55 Experiment 3: Zooming and stretching on mouse move


#DataScientist, #DataEngineer, Blogger, Vlogger, Podcaster at . Back @Microsoft to help customers leverage #AI Opinions mine. #武當派 fan. I blog to help you become a better data scientist/ML engineer Opinions are mine. All mine.