By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,847 Members | 3,242 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,847 IT Pros & Developers. It's quick & easy.

CSS has bigger pixels than canvas?

P: n/a
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>

<titleColor 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
&lt;canvas</canvas>

</body>

</html>

<! end of wash.html>
Oct 20 '08 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Ma************@gmail.com writes:
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 | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Oct 20 '08 #2

P: n/a
Joost Diepenmaat <jo***@zeekat.nlwrites:
Ma************@gmail.com writes:
>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.
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 | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Oct 20 '08 #3

P: n/a
Joost Diepenmaat <jo***@zeekat.nlwrites:
Joost Diepenmaat <jo***@zeekat.nlwrites:
>Ma************@gmail.com writes:
>>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.

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.
--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Oct 20 '08 #4

P: n/a
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?
Oct 20 '08 #5

P: n/a
Ma************@gmail.com writes:
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.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Oct 20 '08 #6

P: n/a
Joost Diepenmaat wrote:
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.
Oct 20 '08 #7

P: n/a
Ma************@gmail.com wrote:
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 >
Shouldn't that be:

<!--

?
<! end of wash.html>
(here too)
--
comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
Oct 21 '08 #8

This discussion thread is closed

Replies have been disabled for this discussion.