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.

Building on the drawing app from previous lessons, clear the HTML5 canvas and create a new function. Praveen guides you through the code for drawing polygons.

Using the HTML5 canvas element and the guidance of Praveen Kumar, learn how to change the code to make polygons that have dynamic shape and movement.

Learn how to add a checkbox to a polygon drawing app in HTML5 canvas that controls whether the shape is filled or not. Enjoy these web development tips!

In this lesson, learn how to develop an HTML5 drawing app with radio buttons, and how to use the draw() function to draw shapes using a stroke or filled style.

Learn how to add range controls to an HTML5 drawing app that will allow the user to change the number of sides and starting angle of the polygons drawn.

Praveen Kumar guides you through adding a range control to the HTML5 drawing app so users can change the width of the lines in their drawings.

Building on the drawing app from previous lessons, add two more controls for color: fill and stroke. Users will be able to select colors with a bit more code.

Learn how to take your HTML5 drawing app up another level by creating a lineCap control that allows users to select the cap style when drawing.

Praveen Kumar shows you how to add two more controls to your HTML5 drawing app: a color selector and a button to clear the canvas. Create a clean slate today!

In this brief lesson with Praveen Kumar, you'll examine the drawing app in HTML5 canvas, and learn how to fix redundant code with an if/else conditional.

Using attributes like xor, source-over, and destination-atop, you can add radio buttons to your HTML5 drawing app so users can choose the effect they want.