Create your first HTML drawing

Did you know you can draw on a webpage? Thanks to the newest version of HTML (called HTML5), you’re now able to actually draw digital images onto a webpage simply by writing code. That’s it! You no longer need to use a fancy graphic design programs, like Illustrator. Instead you can open up your favorite, handy-dandy text editor and begin to draw.

This tutorial is written for people who know a little about how HTML works but are not familiar with the canvas element. You might be new to web development or just want to know a bit more about the canvas element in HTML5. This tutorial will walk you through step-by-step without assuming too much background knowledge.

Create a basic <html> webpage

The first step is to create a simple, basic .html file. You're going to need a text editor and a browser. Find the native text editor that's already on your operating system. On a Mac, search for a program called Text Edit. On a Windows, open up a program called NotePad. Avoid using Microsoft Word, which is a sophisticated word processing program that offers a huge range of formatting and publishing features and makes all sorts of files. It’s much more fancy than you need.

Text Edit and NotePad are bare-bones text processors that make plain-text files with no hidden formatting commands. Your code needs to communicate with computers in order to get the desired effect, and writing computer code requires only a simple plain text processor. Once you’ve found your text editor, open it. Then follow these steps:

  1. Copy the code below, and paste it into a new file.
  2. Save your file with a name that ends with the .html extension, and save it to your desktop. I’ve named this file index.html.
  3. Double click to open the desktop file.

Your web browser should read the HTML and open a new web page. You should see a blank, white page, that includes the first couple words of your title - “HTML5 Tutorial: Basics of Canvas Drawing” on the tab. If you can see this, congratulations - you’ve successfully created your first HTML webpage! When writing computer code, it’s important to regularly check and see if you’re writing it correctly. Every few bits of code, open up your file in your browser to see if the webpage looks the way you’re expecting it to look. By checking regularly, you'll be able to catch your errors quickly and fix them before moving on.

As you can see, your HTML page contains a few basic elements. Every HTML page has these three basic elements - an html element, a head element and a body element. In the head, you place all kinds of information that is not visible to the average visitor, such as title or links to other other files (like CSS and JavaScript) files. I’ve included only the title element right now. The section shows all the visible content of a web page, things like text, images, hyperlinks, and such. If you look within our body element, it’s empty right now, and that’s why there’s nothing on the webpage! We’re now going to add a canvas element which will let us draw on the webpage.

Add the <canvas> element

In order to draw, you need a container, or a space - where you will draw graphics. The <canvas> element makes a container on a web page. Add the canvas element by putting the following into the body of your HTML document.

<canvas id="myCanvas" width="578" height="200" style=”border: 1px solid #747678”></canvas>

Make sure you give an id, width and height attribute to your canvas element. Why is this important? For starters, the width and height tell the web browser the dimension of your canvas in pixels. If you don’t specify the canvas dimensions, the browser will create one for you (300 pixels wide x 150 pixels high). You may need a larger or smaller canvas size, so indicate the size you actually need.

The id attribute is necessary, and must not be left blank or undefined. It allows us to refer to the canvas in our JavaScript code. This id must be unique - no two elements should share the same id.

Finally we’ve added a style attribute so we could outline our canvas with a thin, gray border. Your code should now look like this:

Save and double click on your file. Once your webpage opens in the browser, you should see gray outline around your 300px x 300px canvas box. The canvas itself is white by default. We haven’t drawn anything yet, but now that we’ve made a canvas space, it’s time to draw on your canvas!

Draw on your canvas (with JavaScript!)

To draw on your canvas, you’ll use JavaScript. JavaScript is a programming language that’s used to add interactive effects to web sites. And the newest versions of HTML and CSS have integrated some simple, vanilla JavaScript in order to allow you to create new features and interactions.

If you haven’t used JavaScript before, don’t worry. The JavaScript we need is fairly simple to use. We need to refer to the canvas element, and then write a couple commands in order to draw on the canvas. First we’ll “call” a drawing context of the canvas. Then we’ll use the context to run a few commands that give directions about what will be drawn.

Write the following two lines of JavaScript code, sandwiched between <script> tags. Include this code in the head section of your document, so we’ll place it there, directly under the title.

What does this code do? The first line creates a variable called canvas. This searches through your HTML document looking for the the canvas element, using its “id” name. The document’s property getElementById searches for the element with the id name, “myCanvas”. If you’ve written a different id name, make sure you change the name to match yours. Otherwise the computer will not be able to find it.

The second line makes a context object with the getContext method. We call it the “2d” drawing context, as, in this case, we’re going to be creating two-dimensional drawings. See? Our JavaScript is not too complicated. And now we’re ready to begin drawing!

Begin by drawing a rectangle

Canvas uses a number of methods for drawing things, like lines, rectangles, circles, text and even images. Let’s begin drawing something simple. How about a rectangle?

To create a rectangle, we’re going to use the rect () method. The rect() method creates a rectangle, and we’ll use the fill() method to “fill” the rectangle on the canvas with a color we choose.

Add the following JavaScript code to your page. Place it within the <script> tags, and after the two lines of JavaScript we’ve already written.

Save and open your file. You should see a red rectangle in your canvas now. Although you might be surprised to see this, you shouldn’t be. You told your computer to make a rectangle with those dimensions, at that location and to fill it with the color red.

As you might have guessed, the arguments for your rect() method are rect(x, y, width, height). The x argument is the x-coordinate of the upper-left corner of the rectangle, and the y argument is the y-coordinate of the upper-left corner of the rectangle. And so in our command context.rect(10, 10, 50, 50), we told the computer to make a rectangle that is 10 pixels down from the top, 10 pixels from the left edge of your rectangle. You also told it to make a rectangle that's 50 px(pixels) high and 50 px(pixels) wide.

Congratulations, you've made your first canvas drawing. And it was relatively painless - writing a couple commands in a simple text editor. Wanna try your hand at something a little more challenging?