How to draw on <canvas>

Opening a webpage

When we click on a link in our web browser, the browser connects to a server on the internet and downloads a text file. This text file contains HTML tags that the browser uses to create the webpage we see on our screen. What many people don’t realize is that this text file is literally a text file. It can be opened in any text editor, such as Notepad on Windows or Text Edit on a Mac, and we can edit it just by typing in new tags.

Creating a webpage

To create a webpage, all we need is a text editor. Text editors create plain text files, which store text without any formatting and end in “.txt”. If we use Notepad or Text Edit to create a plain text file and then switch the file’s extension from “.txt” to “.html”, our browser will open up the text file and use it to create a webpage. While the webpage won’t be on the internet—we’d have to upload the text file to a server to put it on the internet—it will still open in our browser when we double-click on the “.html” file, and we can still make changes to the “.html” file if we right- or control-click on it and re-open it in our text editor.

The anatomy of a webpage

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first webpage.</p>
</body>
</html>

A text file has to have a specific structure in order for a web browser to read it and build a webpage from it. For example, the text file for hello.html starts out by telling the browser that this is an HTML document.

<!DOCTYPE html>

Then the <html> tag tells the browser that everything between <html> and </html> is HTML. The <html> is the opening tag and the </html> is the closing tag.

<html>
 
</html>

Inside of the <html> tag is a <head> tag, and inside of the <head> tag is a <title> tag. We put the metadata for a webpage, such as its title, inside of the <head> tag. The title for this webpage is “Hello”. We indent the <title> tag to make the file easier for humans to read; the browser doesn’t care about whitespace.

<head>
<title>Hello</title>
</head>

Inside of the <html> tag and after the <head> tag is the <body> of our webpage. The <body> is where all of the content goes. The <body> of this webpage contains two HTML elements: a <h1> tag for a level 1 heading and a <p> tag for a paragraph.

<body>
<h1>Hello, World!</h1>
<p>Welcome to my first webpage.</p>
</body>

While this may seem like a lot to type to put one heading and one paragraph on the screen, most of it just sets up the text file so that our browser can read it. To see the text file in action, go to hello.html.

Adding a <canvas> to a webpage

<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>
<script>
drawSomething();
</script>
</html>

To add a <canvas> to a webpage, all we need to do is put a <canvas> tag inside of the <body> tag.

<body>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>

This <canvas> is 300 pixels wide and 200 pixels tall, and we’ve named it “myCanvas”. We give the <canvas> a name so that we can draw on it later. If we don’t name the <canvas>, the browser won’t know which element to send our drawing commands to.

Of course, the <canvas> is blank until we draw something on it. We draw on the <canvas> by sending it drawing commands written in JavaScript. To tell the browser to run a script, we add a <script> tag after the <body> but inside of the <html> tag. The <script> tag tells the browser that the text inside of the tag is a script and not HTML. We put the <script> tag after the <body> tag because we want the browser to build the body of the page before running the script.

<script>
drawSomething();
</script>

We could put the entire drawing script inside of the <script> tag, but I prefer to write my scripts in a separate file. We place a link to this separate file inside of the <head> tag.

<head>
<title>Drawing</title>
<script type="text/javascript" src="scripts.js"></script>
</head>

This tells the browser to download a JavaScript file named scripts.js that is in the same folder as the text file for the webpage. Then when the browser hits the <script> tag at the bottom of the text file and it calls the function drawSomething(), it will look for the function’s definition in scripts.js.

Using JavaScript to draw on <canvas>

Just as the HTML for a webpage is stored in a plain text file, scripts for a webpage are also stored in plain text files. Traditionally, computer programs are compiled into some sort of machine language that a computer can understand before they are packaged and run. JavaScript, on the other hand, is interpreted and not compiled. This means that it is stored as text until the computer needs to run it. Then it is translated into machine language on the fly.

While interpreted scripts can run slower than compiled programs because they have to be translated at the same time, we can read, write, and edit scripts easily in a text editor. A JavaScript text file uses the extension “.js”. Since we told the browser to call the function drawSomething() when it gets to the bottom of the webpage’s text file, we need to define that function in scripts.js and use it to draw on the <canvas>.

var ctx;
 
function drawSomething() {
ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(60, 20, 200, 100);
}

At the start of scripts.js, we declare the variable ctx. Because it’s declared outside of any function, ctx is a global variable that any function can use.

var ctx;

Then we define the function drawSomething(). All functions end in parentheses () and the curly brackets {} mark the start and end of the function.

function drawSomething() {
 
}

Inside the function, we start by storing a reference to the context of the <canvas> in ctx. You’ll learn more about the context later. We locate the context by asking the browser to locate the HTML element named “myCanvas”. That’s the name we gave to the <canvas> in the HTML text file.

ctx = document.getElementById("myCanvas").getContext("2d");

Then we tell the context to set its fill color to blue.

ctx.fillStyle = "blue";

Finally, we tell the context to draw a rectangle at the coordinates (60, 20) that is 200 pixels wide and 100 pixels tall, and to fill it with the fill color.

ctx.fillRect(60, 20, 200, 100);

To see these two text files in action, go to bluerectangle.html.

Understanding the <canvas> API

The <canvas> element has been programmed with a powerful set of 2D drawing functions for us to use. For example, we can use the fillRect() function to draw and fill a rectangle. Learning about these drawing functions is important because they define both what <canvas> can do and the language it understands. Trying to ask <canvas> to do something it doesn’t know how to do or using language it doesn’t understand is never going to get us very far. Fortunately, these drawing functions are documented in the <canvas> API (application programming interface). Learn more.

Setting up a <canvas> drawing

To start drawing on <canvas>, we need two text files: one for our webpage’s HTML and the other for our drawing scripts written in JavaScript. Both text files should be saved in the same folder; otherwise, the browser will not be able to find the JavaScript text file. I recommend creating a separate folder for each webpage.

The HTML text file needs to be saved with the “.html” extension and the JavaScript text file needs to be saved with the “.js” extension or else the browser won’t be able to open them. Setting up the text files so that they have the correct extensions can be a little tricky, but once the two text files have the correct extensions, we should be able to work with them easily. If we double-click on the HTML text file with the “.html” extension, it should open in our web browser. To edit the text files, we can right-click or control-click on them and choose the option to open them in our text editor. After saving any changes, the files should still have the correct extensions.

If you’d rather not set up these text files on your own, here is an HTML text file and a JavaScript text file that you can use to get started: template.zip. Download and unzip the files, and then use them as your template. Both files already have the correct file extensions, so you can skip most of the set up. However, if you’d like to set up the text files yourself, then read on.

Here is a basic template for the HTML text file:

<!DOCTYPE html>
<html>
<head>
<title>Drawing</title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" ></canvas>
</body>
<script>
drawSomething();
</script>
</html>

Here is a basic template for the JavaScript text file:

var ctx;
 
function drawSomething() {
ctx = document.getElementById("myCanvas").getContext("2d");
}

Start by typing the text from the templates into two text documents. Make sure that you are using a text editor that saves plain text files with the “.txt” extension. If you save the documents in text files with formatting, such as a “.rtf” (rich text format) or a “.docx” (Microsoft Word) file, then your browser won’t read them correctly. If you are using Notepad on Windows, choose “All Files” in the file type menu when you are saving the files and add the correct extensions to their file names manually. If you are using Text Edit on a Mac, choose “Plain Text” in the file format menu and make sure that “hide extension” is unchecked. This will save the files with a “.txt” extension, but you can click on the files and rename them with the correct extensions afterward. Your Mac will complain, but it’s really okay.

If anything goes wrong, check the file extensions. If you can’t see the file extensions and you are using a Mac, click on the file, choose “Get Info” in the file menu, and uncheck “hide extension”. If you are using Windows, you will have to open the control panel and change folder options to show file extensions. If you can’t open a file in your text editor at all, or you see lots of strange characters you never typed, you should start again from scratch.