Setting height & width with attributes

When we add a <canvas> element to the page without providing any further instructions, the default size of the canvas will be drawn at 300px x 150px.

These values describe the coordinate space of the canvas and if we don't apply any CSS dimensions to the canvas element will be rendered to the screen at 300px x 150px (i.e. The coordinate space and the screen space are 1:1).

If we want to create a coordinate space of different dimensions, we can add a width and height attribute to the canvas element as following.

<canvas width="240" height="160">

It is important to realise that applying any CSS dimensions to the canvas element directly will cause unintended consequences. To understand this better, we can look at an example.

In the example below we have created two canvases which both represent 240px x 160px in the screen viewport. The orange canvas has been created using the width and height attributes of the canvas. The green canvas has applied styles to set the size of the canvas.

Initially, it appears that both canvases produce the same result.

However, if we now click the 'Draw Image' button which will set the img.src = ... in the app.js file, we can see that we now have two different results.

To understand what is happening, let's first take a look at the orange canvas. The HTML canvas element has the width attribute set to 240px and the height set to 160px. This is what creates a canvas element of the same screen dimensions 240px x 160px. When the image has loaded, we then draw the image to the size of 240px x 160px. This causes the image to cover the whole of the canvas.

If we then consider the green canvas, we have only used CSS styles to set the dimensions of this element. This means that the canvas occupies the same amount of screen space as the orange canvas. However, this time when we render the image using the same dimensions as we did for the orange canvas. We see that the image has become warped and the image width does not cover the whole width of the canvas. Similarly, the height is also not quite the way we would expect it to be.

The reason the green canvas does not appear as we expect is that there is a misalignment between the canvas coordinate space and the screen coordinates. For the orange canvas, we have a canvas with canvas coordinates width of 240px and a screen width of 240px. However, for the green canvas we have the default canvas coordinates width of 300px drawn on the screen with width of 240px

There are a couple of ways that we could change the green canvas to produce the correct results. We could either add width and height attributes to the green canvas so that once again the canvas coordinates and the screen coordinates were at the correct ratio. Alternatively, we could change the drawImage command so that it covered the whole of the canvas by changing it to ctx2.drawImage(img, 0, 0, 300, 150).

Have a go at making these changes