Building a Drawing App with HTML5 Canvas

In this first lesson in a four-part series on creating a line drawing app, you’ll start by learning how to record mouse moves in the viewport.

Using the drawLine() function and an HTML5 canvas element, you'll walk through the code and troubleshoot getting the functions to do what you want.

Web development pro, Praveen Kumar, guides you through adding the takeSnapshot() and restoreSnapshot() functions, so you can draw straight lines on the canvas.

Using HTML5 canvas and the drawCircle() function, you’ll troubleshoot how to draw circles in canvas correctly and make your shapes packed with color.

In this HTML5 canvas lesson, you’ll learn how to make a drawing app with fixed and dynamic circles, and how to create patterns using globalCompositeOperation.