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>

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.