Size of HTML5 Canvas via CSS versus element attributes

Question

I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas id="canvas"></canvas>

In contrast with this approach (that works as expected):

<canvas id="canvas" width="800px" height="600px"></canvas>

Tem

Could you explain what you mean by "because css would scale the canvas as it was zoomed in"? Cheers! – Zo

Yes, when you apply the css styling, the canvas fits 800x600 but the content inside it is "enlarged", it's like the canvas coordinate system keeps it's default size, but is "stretched". Let me know if I'm not clear enought. I'm using Firefox 4.0b11 – Neuropath

This may help: https://mcmap.net/q/100445/-resizable-canvas-jquery-ui/… – Calaboose

Note that the width and height attributes of the canvas should not have dimensions (unlike CSS). You should have width="800", not width="800px". – Aksum

s/dimensions/explicit pixel units/ – Pterodactyl

This question is also answered here: https://mcmap.net/q/330955/-html5-canvas-distorted – Jaela

@Aksum why shouldn't it be specified? – Housman

Possible duplicate of Canvas is stretched when using CSS but normal with "width" / "height" properties – Scintillation

une explication claire , précise...et fondamentale ! : webglfundamentals.org/webgl/lessons/… – Sludge

Answer 1

The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!

The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.

Tem

That is the most useful answer I have seen on how the canvas coordinate system works. – Ezzo

Answer 2

Think about what happens if you have a JPG that is 32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:

• The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
  "the width attribute defaults to 300, and the height attribute defaults to 150."

• The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.

If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/

Aksum

@Phrogz's answer is clearer than the accepted answer. A canvas with pixel dimensions specified by its height and width HTML attributes (or the default 300x150) will be scaled to the size specified by CSS properties. – Classical

@Aksum this seems to be the correct answer in my opinion. – Fiendish

As an addition here is what I am using so that the canvas takes it's size from CSS. The substring is to remove the px from the end of the string const canvas = document.querySelector("canvas"); const compStyles = window.getComputedStyle(canvas); canvas.width = compStyles.width.substr(0, compStyles.width.length - 2); canvas.height = compStyles.height.substr(0, compStyles.height.length - 2); – Repression

What if I want to change the actual size of the canvas when the browser is resized? – Mind

@RonInbar The add an event listener for the resize event, and set the width and height attributes of the canvas element to match the offsetWidth and offsetHeight properties showing its actual size. For example: https://mcmap.net/q/330956/-scale-html-canvas-to-browser-window-size-but-don-39-t-scale-elements-within-the-canvas phrogz.net/tmp/canvas-fullscreen.html – Aksum

Answer 3

The best way to size your canvas is to include in a div and style your div with the size that you want.

Here is the CSS

<style>
#divCanvas{
    width: 800px;
    height: 600px;
}
</style>

Here is the HTML

<div id="divCanvas">
    <canvas id="canvas"></canvas>
</div>

Inartistic