Canvas size and resolution

The size of a canvas is the area it occupies on the page and is defined by the CSS width and height properties.

canvas {
   width : 1000px;
   height : 1000px;
}

The canvas resolution defines the number of pixels it contains. The resolution is set by setting the canvas element width and height properties. If not specified the canvas defaults to 300 by 150 pixels.

The following canvas will use the above CSS size but as the width and height is not specified the resolution will be 300 by 150.

<canvas id="my-canvas"></canvas>

This will result in each pixel being stretched unevenly. The pixel aspect is 1:2. When the canvas is stretched the browser will use bilinear filtering. This has an effect of blurring out pixels that are stretched.

For the best results when using the canvas ensure that the canvas resolution matches the display size.

Following on from the CSS style above to match the display size add the canvas with the width and height set to the same pixel count as the style defines.

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>