HTML and CSS Reference
9.3 Setting <canvas> Dimensions
You want to explicitly specify the width and height of your canvas element to be dif-
ferent than the default dimensions.
Add the width and height attributes, and their corresponding values, to your canvas
<canvas id="mycanvas" width="200" height="200" ></canvas>
You may also want to change the width and/or height of your canvas element with
is available in your canvas element, you must change the attributes of the canvas element
(not the CSS style properties of width and height , as you might assume):
mycanvas. setAttribute ("width", "200"); // will change the bitmap dimensions
mycanvas. setAttribute ("height", "200");
You can also set the width and height properties directly on the element:
mycanvas. width = 200; // will change the bitmap dimensions
mycanvas. height = 200;
Either approach will allow your canvas element to use 200 pixels in the horizontal
direction and 200 pixels in the vertical direction.
By contrast, controlling the size of your canvas element with CSS—either with CSS
dimensions of your canvas element, but rather takes the existing canvas element (at its
existing bitmap dimensions) and stretches or shrinks its physical dimensions, as
mycanvas. style.width = "200px"; // will shrink the horizontal rendering
mycanvas. style.height = "200px"; // will stretch the vertical rendering
The default dimensions of a canvas element are 300 pixels wide by 150 pixels high. In
practice, you'll usually want to define different dimensions for your canvas element.
As with all block-level HTML elements, if you make your canvas abso-
lutely positioned, it does not necessarily default to having any physical
dimensions to render. You need to explicitly define the physical ren-
dering dimensions via CSS, in addition to the bitmap pixel dimensions.
To keep a consistent rendering ratio, make sure the physical dimensions
match the bitmap pixel dimensions.