The Canvas Size

The HTML <canvas> element has, by default, a width of 300px and a height of 150px.

index.html

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

        <script src="index.js"></script>
    </body>
</html>

index.js

Let’s check out the width and height values of the <canvas> element by getting a reference to it.

To get a reference to the HTML <canvas> element in the document, we have to use the Document.querySelector() method. As argument we pass the string “canvas” and use a variable to contain that reference. Now the variable contains the HTMLCanvasElement object.

const canvas = document.querySelector("canvas")

Now, we can access its properties, i.e, width and height.

console.log(canvas.width) // 300
console.log(canvas.height) // 150

If we wish, we can modify its width and height attributes by assigning new values. These values must be positive integers.

Changing the size of a canvas element with CSS

It’s possible to change the size of the canvas using CSS. However, doing this might give unexpected results. But why?

If we change the width and height properties using CSS, the web browser will scale the surface.

Let’s see this in action.

First, let’s draw a 150x75 rectangle and place it at the center of the canvas.

const rectXCoordinate = canvas.width / 2
const rectYCoordinate = canvas.height / 2

const context = canvas.getContext("2d")
context.fillRect(rectXCoordinate-75, rectYCoordinate-37.5, 150, 75)

Now let’s get a reference to our second <canvas> element with the ‘canvas2’ id, get the context and draw a rectangle. Let’s pass the same arguments to the fillRect() method.

const canvas2 = document.getElementById("canvas2")

const rect2XCoordinate = canvas2.width / 2
const rect2YCoordinate = canvas2.height / 2

const context2 = canvas2.getContext("2d")
context2.fillRect(rect2XCoordinate-75, rect2YCoordinate-37.5, 150, 75)

style.css

In our CSS file, let’s add the following:

#canvas2 {
    width: 600px;
    height: 300px;
}

black rectangle

scaled black rectangle

As we can observe in the second image the drawing has been scaled (even though it’s got the same arguments or values as the first one). Since we have changed the width and height using CSS, the browser will scale the surface trying to fit the drawing onto the canvas.

Note: It’s better to use the canvas’ width and height attributes to size the element instead of using CSS.

Challenge

Modify the width and height directly in the ‘canvas’ tag. Has the drawing surface been scaled?