Creating and Drawing on an HTML5 Canvas using JavaScript

Let’s explore what the canvas is and draw some shapes.

Prerequisites / Info

• This is part of the JS Game Dev Series
• You should have some knowledge of JavaScript — I will not explain irrelevant syntax such as for-loops
• Knowledge of ES6 Classes is helpful but not required
• Basic math/geometry knowledge
• Basic artistic skills

Starter Code

I moved this to a separate page to keep this article short and so I only have to update it in one place.

Setup a Canvas Starter Boilerplate

Final Code for this Tutorial

You can get all the code from this tutorial on the repository below. Keep in mind there’s also a lot of code included that’s not written here. This is because I added more code to create screenshots/diagrams for this tutorial.

CodeDraken/canvas-shapes-basics

Note: As the focus of this tutorial is not building a project, you don’t need to copy every line exactly. In fact, since we’ll be covering many examples, I encourage you to play with it and make a mess.

What is the Canvas Element?

Some quick bullet points to introduce you to the canvas.

• Introduced with HTML version 5 to draw graphics using JavaScript
• Graphics can be 2D or 3D and it’s able to use hardware acceleration
• Used often today for creating games and visualizations (data or artistic)

Steps to Getting Started with The Canvas

When working with a canvas there are five steps to get started.

1. Create the canvas element — give it an id, and a width/height (HTML)
2. Add base styles — center the canvas, add a background color, etc (CSS)