Search⌘ K
AI Features

Drawing Things

Explore how to begin drawing on the HTML5 canvas by writing JavaScript that accesses the canvas element, obtains its 2D rendering context, and issues basic drawing commands. Understand the initial steps to manipulate pixels on the canvas and see your first shapes rendered on screen.

In the previous section, we basically defined our canvas element in markup. While important, what we’ve just done is a very VERY minor part of working with the canvas overall. The real work is about to happen in this section when we write the JavaScript that interacts with the canvas element to get pixels to show up on the screen.

Adding the Script Tags

Before we can write JavaScript, we need a script tag that will house the JavaScript we write. You can use an external JavaScript file or keep all of the code in the same document. It will look something as follows:

With this minor addition, you are now set to write some JavaScript that will interact with our canvas element!

Accessing our Canvas Element

When ...