473,545 Members | 1,821 Online
Bytes | Software Development & Data Engineering Community
+ 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.getEle mentById( '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:#f0f 8ff; }

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

</head>

<body onload=init()>

<canvas id=wash class=wash onclick=draw()g et a browser that supports
&lt;canvas</canvas>

</body>

</html>

<! end of wash.html>
Oct 20 '08 #1
7 2023
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.n lwrites:
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.n lwrites:
Joost Diepenmaat <jo***@zeekat.n lwrites:
>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.javas cript 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
2196
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 entry field of the same size as the rectangle placed exactly over the rectangle thus creating the effect that the rectangle has entered "input...
1
3129
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 from the left the left visibility border is and from what fraction to the right the right visibility border is. Consider this ascii picture as...
2
18240
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: def __init__(self, canvas, xy, color, change): self.canvas = canvas self.id = self.canvas.create_rectangle(-10-abs(change),
5
4237
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 2D graphics and plot pixels
2
5565
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(...) errmessage="error!" okmessage="dir validation ok!"
10
7344
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 well, except one thing. When I am not in the program, and the program receives a draw command (from a FIFO pipe), the canvas does not refresh...
5
2162
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 myImg (say, to invert each one).
4
10080
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 shape goes beyond the right or bottom side. However, I don't get scrollbars when shapes move beyond the left or top side of the canvas. This is bad. ...
7
3545
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 excellent transforms specified on Bob Powell's site, I still wonder if there's an easier way of centering it than the following procedure? Here is...
0
7487
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7680
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7934
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7778
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6003
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5349
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4966
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3476
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1033
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.