CSS has bigger pixels than canvas?

MartinRinehart · Oct 20, 2008

In the bit of code posted below, I get a 256x128 canvas, sized via
CSS. Then I write a color wash, same dimensions. Problem: wash is
about 10% smaller than the canvas. Results identical, FF on WinXP,
Opera on WinXP, Opera on KDE. Was hoping that 256x128 would fit nicely
in 256x128.
------------------------------------------------------------
<! wash.html - experiment with drawing wash for color chooser >

<html>

<head>

<title> Color Wash </title>

<script>
privs = {
steph:4,
stepv:4
}
function init() {
var wash = document.getElementById( 'wash' );
var pen = wash.getContext( '2d' );
var h = privs.steph;
var v = privs.stepv;

for ( var r=0; r < 128; r += v ) {
for ( var c=0; c<256; c+= h ) {
// alert( 'r='+r+', c='+c+', v='+v+', h='+h );
pen.fillStyle = 'rgb( '+(r*2)+', 255,'+(c)+' )';
pen.fillRect( c, r, h, v );
}
}
} // end of init()

function draw() {
alert( 'ouch!' );
}
</script>

<style>
body { background:#f0f8ff; }

.wash {
position:absolute; top:10; left:10;
height:128px; width:256px;
background:#ffffff;
}
</style>

</head>

<body onload=init()>

<canvas id=wash class=wash onclick=draw()> get a browser that supports
<canvas> </canvas>

</body>

</html>

<! end of wash.html>

Joost Diepenmaat · Oct 20, 2008

In the bit of code posted below, I get a 256x128 canvas, sized via
CSS.

As far as I can make out from playing with that code, you shouldn't
scale canvases via CSS. If you set the with and height as properties of
the canvas it all works as expected.

Joost Diepenmaat · Oct 20, 2008

Joost Diepenmaat said:
As far as I can make out from playing with that code, you shouldn't
scale canvases via CSS.

Or make that: the with and height you set as properties of the canvas
determine the number of horizontal and vertical "points" in that
canvas. Scaling it via CSS does not influence that, it just scales the
canvas points.

Joost Diepenmaat · Oct 20, 2008

Joost Diepenmaat said:
Or make that: the with and height you set as properties of the canvas
determine the number of horizontal and vertical "points" in that
canvas. Scaling it via CSS does not influence that, it just scales the
canvas points.

And also, from: http://www.whatwg.org/specs/web-apps/current-work/

The canvas element has two attributes to control the size of the
*coordinate space*: width and height. These attributes, when
specified, must have values that are valid non-negative integers. The
rules for parsing non-negative integers must be used to obtain their
numeric values. *If an attribute is missing*, or if parsing its value
returns an error, then *the default value must be used instead*. The
width attribute defaults to 300, and the height attribute defaults to
150.

MartinRinehart · Oct 20, 2008

Thanks ever so much, Joost. Working nicely now.

I am still very much hoping someone can explain the reason for the
discrepancy. The canvas was 256x128. The drawing in the canvas was
small. When I switched from CSS to height=, width= canvas attributes,
the wash got bigger. Fatter pixels?

Joost Diepenmaat · Oct 20, 2008

Thanks ever so much, Joost. Working nicely now.

I am still very much hoping someone can explain the reason for the
discrepancy. The canvas was 256x128. The drawing in the canvas was
small. When I switched from CSS to height=, width= canvas attributes,
the wash got bigger. Fatter pixels?

The link to the whatwg site should have explained that: canvases don't
work on pixels per se: they have an internal coordinate space that can
be scaled and rotated freely (see also the scale, rotate, translate and
transform methods). If you don't set a width or height, they default to
300 x 150 (and the default rotation is always 0). If you don't scale the
canvas styles, the canvas element will be exactly as wide and high as
the coordinate system implies (300 x 150 with the default values).

If you scale the canvas using CSS that's exactly what it does: it scales
and stretches the canvas element to fit that region of the page. It does
not change the internal coordinate system.

So, yeah, you may get fatter (or thinner, or higher or smaller) pixels.

MartinRinehart · Oct 20, 2008

Joost said:
The link to the whatwg site should have explained that: canvases don't
work on pixels per se: they have an internal coordinate space that can
be scaled and rotated freely (see also the scale, rotate, translate and
transform methods). If you don't set a width or height, they default to
300 x 150 (and the default rotation is always 0). If you don't scale the
canvas styles, the canvas element will be exactly as wide and high as
the coordinate system implies (300 x 150 with the default values).

Ah! Mystery explained. Now I can get back to work.

dhtml · Oct 21, 2008

In the bit of code posted below, I get a 256x128 canvas, sized via
CSS. Then I write a color wash, same dimensions. Problem: wash is
about 10% smaller than the canvas. Results identical, FF on WinXP,
Opera on WinXP, Opera on KDE. Was hoping that 256x128 would fit nicely
in 256x128.

Shouldn't that be:

<!--

?

<! end of wash.html>

(here too)

I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
JavaScript: how to keep track of the circle in canvas on specific path?	0	Mar 20, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with my responsive home page	2	Dec 14, 2022
I need help making a zooming function	11	Dec 14, 2021
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Please Help?	0	Jul 23, 2022

CSS has bigger pixels than canvas?

MartinRinehart

Joost Diepenmaat

Joost Diepenmaat

Joost Diepenmaat

MartinRinehart

Joost Diepenmaat

MartinRinehart

dhtml

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads