HMTL5 Anti Aliasing Browser Disable
- by Tappa Tappa
I am forced to consider writing a library to handle the fundamental basics of drawing lines, thick lines, circles, squares etc. of an HTML5 canvas because I can't disable a feature embedded in the browser rendering of the core canvas algorithms.
Am I forced to build the HTML5 Canvas rendering process from the ground up? If I am, who's in with me to do this? Who wants to change the world?
Imagine a simple drawing application written in HTML5... you draw a shape... a closed shape like a rudimentary circle, free hand, more like an onion than a circle (well, that's what mine would look like!)... then imagine selecting a paint bucket icon and clicking inside that shape you drew and expecting it to be filled with a color of your choice.
Imagine your surprise as you selected "Paint Bucket" and clicked in the middle of your shape and it filled your shape with color... BUT, not quite... HANG ON... this isn't right!!! On the inside of the edge of the shape you drew is a blur between the background color and your fill color and the edge color... the fill seems to be flawed.
You wanted a straight forward "Paint Bucket" / "Fill"... you wanted to draw a shape and then fill it with a color... no fuss.... fill the whole damned inside of your shape with the color you choose.
Your web browser has decided that when you draw the lines to define your shape they will be anti-aliased. If you draw a black line for your shape... well, the browser will draw grey pixels along the edges, in places... to make it look like a "better" line.
Yeah, a "better" line that **s up the paint / flood fill process.
How much does is cost to pay off the browser developers to expose a property to disable their anti-aliasing rendering? Disabling would save milliseconds for their rendering engine, surely!
Bah, I really don't want to have to build my own canvas rendering engine using Bresenham line rendering algorithm... WHAT CAN BE DONE... HOW CAN THIS BE CHANGED!!!??? Do I need to start a petition aimed at the WC3???? Will you include your name if you are interested???
UPDATED
function DrawLine(objContext, FromX, FromY, ToX, ToY) {
var dx = Math.abs(ToX - FromX);
var dy = Math.abs(ToY - FromY);
var sx = (FromX < ToX) ? 1 : -1;
var sy = (FromY < ToY) ? 1 : -1;
var err = dx - dy;
var CurX, CurY;
CurX = FromX;
CurY = FromY;
while (true) {
objContext.fillRect(CurX, CurY, objContext.lineWidth, objContext.lineWidth);
if ((CurX == ToX) && (CurY == ToY)) break;
var e2 = 2 * err;
if (e2 > -dy) { err -= dy; CurX += sx; }
if (e2 < dx) { err += dx; CurY += sy; }
}
}
