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
<canvas</canvas>
</body>
</html>
<! end of wash.html>
7  2016  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/
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/
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/
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?
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/
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. 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/ > This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
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...
|
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...
|
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:...
|
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...
|
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(...)...
|
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...
|
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...
|
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...
|
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...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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...
|
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,...
|
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...
|
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,...
| |
