HTML5 Canvas Crash Course using JavaScript

4 min readNov 4, 2020

Canvas Tutorial for Beginners (HTML5 + JavaScript)

From time to time your website might need some creative touches. Using the <canvas> HTML5 tag is the best way to provide dynamic graphics for your users. In this article we’ll cover the basics of using canvas such as drawing rectangles and lines, as well as rendering images on the screen.

Corresponding video tutorial

Creating your project

There are a number of different ways to create a basic website. Throughout this tutorial we’ll be using a standard HTML, JS, and CSS file without any frameworks or libraries. The first step is to create the index.html file which will hold our canvas element, import our JavaScript file, and import our CSS file:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="./index.js"></script>
</body>
</html>

Next you will need to create blankindex.js and style.css files. We’ll use these later on.

Accessing the Canvas object

We can now access our <canvas> element within our index.js file. From there we can access the 2d context to draw to and use the canvas functionality.

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

The ctx variable represents the context that we’re working in, either 2d or 3d. We’ll be sticking with the 2d context throughout this tutorial. We can set a border around the canvas element using CSS. This will help us view the size of the canvas.

canvas {
    border: 1px solid red;
}

If you open your HTML file you should see a border like so:

The default height is 150px, and the default width is 300px. You can manually set the width and height of the canvas object with the following JavaScript:

canvas.width = 500 // Change to your desired width
canvas.height = 500 // Change to your desired height

Rectangles

You can either display solid rectangles or just the border of a rectangle using fillRect() or strokeRect() respectively.

ctx.strokeRect(50, 50, 100, 100)
ctx.fillRect(100, 100, 100, 100)

You should now see the following:

Both of these methods require 4 arguments: x, y, width, and height. The x and y are in respect to the canvas borders and start with 0, 0 being at the top left.

Lines

You can easily draw lines from one point to another using canvas. This is done by specifying where you want your “pen” to be located, then drawing from there.

ctx.beginPath()
ctx.moveTo(350, 350) // Where to move your pen
ctx.lineTo(350, 100) // Where to draw to next
ctx.lineTo(200, 350) // Where to draw to next
ctx.stroke() // Actually draw the line

That code should give us this result:

You can easily close the gap automatically with .closePath() like so:

ctx.beginPath()
ctx.moveTo(350, 350) // Where to move your pen
ctx.lineTo(350, 100) // Where to draw to next
ctx.lineTo(200, 350) // Where to draw to next
ctx.closePath()
ctx.stroke()

Rendering Images

You can easily render images from a URL on a canvas. For this example we’ll be using the Worn Off Keys logo which can be found at https://wornoffkeys.com/logo.png

We first have to create a new Image object and load the image:

const image = new Image()image.setAttribute('src', 'https://wornoffkeys.com/logo.png')image.addEventListener('load', () => {
    // Render the image here
})

We now want to render the loaded image at the center of the canvas. To do that we first need to determine the width and height of the image. For the Worn Off Keys logo that can be done like so:

image.addEventListener('load', () => {
    const width = 250
    const height = width * 0.73
})

This allows us to adjust the width of the image and the height will change accordingly, for this image specifically. Finally we can actually render the image. We’ll divide the width and height of the canvas by 2 and then subtract the width and height of the image by 2. This will give us the exact location to place the image for it to be in the center of the canvas.

ctx.drawImage(
    image,
    canvas.width / 2 - width / 2,
    canvas.height / 2 - height / 2,
    width,
    height
)

We now have our final result:

You can adjust the x, y, width, and height arguments to place images elsewhere as well. Of course there are more features that canvas offers, and more information can be found at the documentation: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

HTML5 Canvas Crash Course using JavaScript

Written by Alexzander Flores