Create a Drawing App with HTML5 Canvas and JavaScript { William Malone }

Create a Drawing App with HTML5 Canvas and JavaScript { William Malone }: - Inviata con Google Toolbar

Create a Drawing App with HTML5 Canvas and JavaScript

by William Malone

This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn:

• How to draw dynamically on HTML5 canvas
• The future possiblities of HTML5 canvas
• The current browser compatibility of HTML5 canvas

Each step includes a working demo; if you want to skip ahead:

• Simple Demo
• Colors Demo
• Sizes Demo
• Tools Demo
• Outline Demo
• Complete Demo

Define Our Objective

---

Let's create a web app where the user can dynamically draw on an HTML5 canvas. What will our users use? A coloring book comes to mind; that means crayons. Our first tool is a crayon. Although the real world doesn't agree, I think we should be able to erase crayons. Our second tool will be an eraser (sorry reality). And because I have always have been a Sharpie® fan our final tool will be a marker.
Our tools could use colors (except maybe our eraser). Let's keep it simple, so we give our user 4 different colors to choose from.
Similarly let's also give our user 4 different sizes to draw with, because we can. To recap our app should have the following:

• 3 tools: crayon, marker, eraser
• 4 colors to choose from (except eraser)
• 4 sizes to choose from

Like a coloring book, let's give our user something to "color". I have chosen a favorite of mine: Watermelon Duck by Rachel Cruthirds.