473,487 Members | 2,622 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

CSS has bigger pixels than canvas?

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
7 2020
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2187
by: Mickel Grönroos | last post by:
Hi, I'm trying to put an Tkinter.Entry of fixed size onto a specific location on a canvas using the place manager. The idea is that one can double-click a rectangle object on a canvas to get an...
1
3123
by: Mickel Grönroos | last post by:
Hi, I have a Tkinter.Canvas of variable width. Is there a standard way of asking the canvas which parts of it that is visible? I.e. on the horizontal scale, I would like to know at what fraction...
2
18217
TMS
by: TMS | last post by:
Schools over!!! Now its time to play. I would like to learn how to make objects move from one location to the next on a canvas widget. For example: from Tkinter import * class square:...
5
4236
by: jo5867472 | last post by:
hi to all I am just a beginner of python. I want to know how pixels are plotted in python. I am not intending to use PIL because I don't need to manipulate images. So is there a simple module for...
2
5540
by: devnew | last post by:
hi i am new to tkinter and would like some help with canvas i am doing validation of contents of a folder and need to show the ok/error messages on a canvas resultdisplay =Canvas(...)...
10
7331
by: blaine | last post by:
Hey everyone! I'm not very good with Tk, and I am using a very simple canvas to draw some pictures (this relates to that nokia screen emulator I had a post about a few days ago). Anyway, all is...
5
2161
by: Tim Streater | last post by:
If I create an image thus: var myImg = new Image (); I can then do the following: myImg.src = "someimage.jpg"; But, I can't seem to find a way to manipulate the pixels of the image in...
4
10069
by: moondaddy | last post by:
I have a wpf project where I use a canvas to drag shapes around. when I drag a shape beyond the right or bottom side I get scrollbars which is good. I also get scrollbars when I zoom in and a...
7
3537
by: raylopez99 | last post by:
I have a logical drawing space much bigger than the viewport (the screen) and I'd like to center the viewport (the screen) to be at the center of the logical drawing space. After following the...
0
7106
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6967
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
1
6846
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
1
4874
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4565
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3076
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
3071
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1381
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
267
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.