Hello, let's say I have some given coordinates x and y for a pixel, how could I make it red (keeping everything else on the page just white) in HTML? Is it possible in HTML?
Hello cobbal!!! Please, give me an example (piece of code). How do I do that absolute positioning?
brilliant
2010-04-11 01:11:55
+1
A:
Probably not. It might be possible in Javascript, but I can't imagine it's a well known thing.
Why do you need to change one pixel?
Josh K
2010-04-11 01:01:27
Hello Josh!!!! Well, I don't relly have any purpose at this time, I am just trying to find out if its possible in HTML at all.
brilliant
2010-04-11 01:04:44
A 1px div as mentioned, but if you're planning on doing anything fancy with it (i.e. drawing) it's going to be slow.
Josh K
2010-04-11 01:06:53
+6
A:
What you likely need is the canvas element.
Otherwise, the 1 pixel div solution offered by cobbal is a way to do it.
I suspect though, that you're hoping to extrapolate this idea into generally being able to draw arbitrary pixels. In that case, div elements will be extremely slow.
The canvas element is part of the emerging HTML 5 standard. You're not going to have much support with IE browsers, but everything else works these days.
Koobz
2010-04-11 01:04:06
Hello Koobz!!!! "In that case, div elements will be extremely slow" - Do You mean that this kind of page will take a long time to be loaded in the browser?
brilliant
2010-04-11 01:13:06
In simple cases, it will be negligible. In fact, if all you ever do is draw one pixel, it will be perfectly fine so don't let me scare you.If you were to use it for something like drawing a circle and then animating it, the result will likely be 100x slower than doing the equivalent in canvas. I'm pulling that number out of the air, but if anything, I suspect it's worse in practice.
Koobz
2010-04-11 02:10:49
+7
A:
<div style="position: absolute; left: {X}px; top: {Y}px; width: 1px; height: 1px; background-color: red;"></div>
Replace {X} and {Y} with the real coordinates you have. Might need to mess with z-index, depending on the page. Using position: fixed will let you position it relative to the browser, rather than the document.
bcherry
2010-04-11 01:04:29
Ooops! This way it doesn't seem to work. Am I doing somethinf wrong? : <head> </head> <body> <div style="position: absolute; left: 50px; top: 100px; width: 1px; height: 1px; color: red;"></div> </body>
brilliant
2010-04-11 01:24:19
Oh yeah, sorry. Small typo. `color: red;` should be `background-color: red;`. I've corrected it above. Here's a demo to verify it works: http://jsfiddle.net/ERyNC/
bcherry
2010-04-12 02:08:17
+1
A:
You can use a pure HTML table (with borderwidth, cellpadding and cellspacing all 0, and tr and td heights all 1) to create something like this:
You can hand-edit the HTML code for this pixel-by-pixel (since it's just one big table).
Note: this is obviously not a practical approach (as you will see as your browser struggles to render a 6 MB HTML file), but it is technically possible to do pixel-by-pixel graphics with pure HTML.
MusiGenesis
2010-04-11 03:51:44
Thanks, MusiGenesis!!! Perfect idea. I think if the background were white instead of black browser would "struggle" much less.
brilliant
2010-04-11 04:22:15
Mercifully I'm not *this* bored, but you could write a whole javascript-based graphics engine that works with ridiculous one-pixel-per-cell tables like this, drawing lines, shapes, text etc. pixel-by-pixel by setting the bgcolor of each cell. It would be like the old days on the Apple IIe - you'd get to watch your graphics being drawn one pixel at a time.
MusiGenesis
2010-04-11 04:36:28