Line drawing in javascript

[larztheloser]

This has been done often using layers, but I can't use those scripts because I want the line's pixels not to be layers but 1 by 1 pixel table cells. This is so that I can animate the table more easily. I know I could use nested layers but most graphics libs out there won't let me do that without me going through their impossible to comprehend code. And plus I like tables.

Here is my code, based upon the idea that at each y-value (table row) those colums that fit the equation y-y1=m(x-x1) will be drawn.

function renderLine(x1,y1,x2,y2)	{
line_color="#000000";
element=document.getElementById("tableLayer");
m=(y2-y1)/(x2-x1);
data="<table cols='"+Math.abs(x2-x1)+"' cellpadding='0' cellspacing='0' border='0'>";
for(y=0;y<Math.abs(y2-y1);y++)	{
data+="<tr>";
for(x=0;x<Math.abs(x2-x1);x++)	{
data+="<td width='1' height='1'";
yv=m*(x-x1)+y1;
if(y==Math.round(yv))	data+=" bgcolor='"+rrColor+"'";
data+=" nowrap></td>";	}
data+="</tr>";	}
data+="</table>";
element.innerHTML=data;	}

Can anybody tell me why this produces some VERY strange results (usually nothing at all)? It doesn't seem to throw an error so I have no idea what the problem is! Could somebody please help me?

[acoder]

What kind of values are you passing to the function? Have you considered using the <canvas> element?

[larztheloser]

Yes I have considered using <canvas> but IE doesn't support it. I'm also not particularly interested in using a script to simulate <canvas> on IE because that will slow me down as well. Thanks for the suggestion!

I'm passing pixel values. Currently x1 needs to be beneath x2 and y1 beneath y2 for an incorrect output, otherwise there's no output.

[gits]

just tested it in Firebug-console with:

function renderLine(x1,y1,x2,y2) {
    var line_color = "#000000";
    var element = document.getElementsByTagName('body')[0];
    var m = (y2-y1)/(x2-x1);
    var data = "<table cols='"+Math.abs(x2-x1)+"' cellpadding='0' cellspacing='0' border='0'>";

    for (y = 0; y<Math.abs(y2 - y1); y++) {
        data += "<tr>";

        for (x=0; x < Math.abs(x2 - x1); x++) {
            data += "<td width='1' height='1'";
            var yv = m * (x - x1) + y1;

            if (y == Math.round(yv)) {
                data += " bgcolor='"+ 'red' +"'";
            }

            data += " nowrap></td>";    
        }

        data += "</tr>";    
    }

    data += "</table>";

    element.innerHTML = data;    
}

renderLine(100, 1, 20, 100);

and it works. but it is very slow when you pass big numbers since that will result in very large node-constructs. FF alerted the 'script is running slow'-message so it seems not to be the best idea to use that for such cases.

to the problem: how do you pass the values to the function?

kind regards

[acoder]

I noticed rrColor in your code - did you mean to use line_color there?

Have you tried explorercanvas - a simple plugin script for IE?

[gits]

i noticed that too and replaced it for the test ... see line 15

kind regards

[larztheloser]

Thanks so much! That seems to work in IE too. I also think it could be optimised by splitting big lines into smaller lines - this would decrease the number of pixels being checked. rrColor was a mistake - I was working furiously on this when I sent it and noticed that mistake a few hours later (but it wasn't working anyway). Git's code seems to work, however, so yeah, big thanks!

[gits]

note that my version of the code just uses local variables and replaced the rrColor variable ... so that it might be that this caused your problems ... always try to avoid globals.

kind regards