The Canvas

There are various ways to draw on a web page. The first one that comes to mind is using HTML and CSS. However, there are also more powerful tools such as SVG and Canvas.

When it comes to creating our mini-game, using Canvas is likely the most suitable method. Therefore, it is the approach we will adopt.

Canvas API

As we are not using any framework or library, we will need to use the Canvas API provided by web browsers. However, don't worry, all the functionalities we need are supported by modern browsers these days.

If you open the source code (provided at the end of the previous chapter), you will notice that we already have a <canvas> element in the index.html file.

Our next step is to initialize it using JavaScript. I have created 2 JavaScript files: toy.js and game.js. toy.js will be used to practice and test the tools we will create without cluttering game.js, which will be exclusively dedicated to creating our game.

async function init () {
    const canvas = document.querySelector('#fallen_hero .game_canvas')
    const ctx = canvas.getContext('2d')
}

window.addEventListener('load', init)

Let's draw rectangles

It must be admitted that the Canvas API can be somewhat complex, which is why there are frameworks available to simplify its usage. However, for the purpose of our game, we only require a few basic functions to display rectangles and images.

Let's create a first function that draws a rectangle using the Canvas API.

function drawRectangle (ctx, {x, y, width, height, color}) {
    ctx.fillStyle = color
    ctx.fillRect(x, y, width, height)
}

Having created this function, we can now rely exclusively on it instead of using the Canvas API directly.

This marks the beginning of building our toolbox by creating such tools that will be useful in the future.

Now we can draw some rectangles on the canvas.

drawRectangle(ctx, {
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    color: 'black'
})

drawRectangle(ctx, {
    x: 200,
    y: 50,
    width: 150,
    height: 150,
    color: 'white'
})

You should see two rectangles appear.

Now let's draw some images

Drawing images can be a bit tricky, as we need to wait for the image to load before we can display it.

So, let's start by creating a function to load an image. In addition, we will create a new file named utils.js to store our utility functions.

export function loadImage (path) {
    return new Promise((resolve, reject) => {
        const image = new Image()
        image.src = path
        image.onload = () => resolve(image)
        image.onerror = reject
    })
}

To use this function in toy.js, we need to import it at the top of the file.

import {loadImage} from './utils.js'

const heroImage = await loadImage('images/hero_run_01.png')

Now let's take a look at the Canvas API to draw an image and create our own function as we did for rectangles.

By the way, this is the right time to move our drawRectangle function to the separate file utils.js.

export function drawImage (ctx, {x, y, width, height, image}) {
    ctx.drawImage(image, x, y, width, height)
}

Then we can draw our hero on the canvas.

const heroImage = await loadImage('images/hero_run_01.png')
drawImage(ctx, {
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    image: heroImage
})

Here is the result.

Our progress so far

We have unlocked the following tools:

• Drawing a rectangle
• Loading an image
• Drawing an image

This is all we need to draw the game scene.