I have implemented Wu's based on the article on the wiki and here is a live version: http://jsfiddle.net/yoc6cq0f/4/. It seems to work ok for x-axis major increments, but sometimes it looks like it misses some diagonals, I dont know if that is just a graphic thing. Also when the mode switches (~45 degrees) there is a noticeable jump with the tiles covered.
Also I dont quite know how to apply Wus to a box with x,y, width and height since Wus, as I understand it, only cares about line thickness.
Relevant portions of the code:
function wu(x0, y0, x1, y1){
var gX0 = x0 * 10;
var gY0 = y0 * 10;
var gX1 = x1 * 10;
var gY1 = y1 * 10;
var yMajor = Math.abs(y1 - y0) > Math.abs(x1 - x0);
var temp;
if (yMajor){
// swap(x0, y0);
temp = x0;
x0 = y0;
y0 = temp;
// swap(x1, y1);
temp = x1;
x1 = y1;
y1 = temp;
}
if (x0 > x1){
//swap (x0, x1);
temp = x0;
x0 = x1;
x1 = temp;
//swap (y0, y1);
temp = y0;
y0 = y1;
y1 = temp;
}
var dx = x1 - x0;
var dy = y1 - y0;
var slopeYX = dy/dx;
// ignore end points for now;
var xend = Math.round(x0);
var yend = y0 + slopeYX * (xend - x0);
var xStart = xend;
var yStart = Math.round(yend);
var errY = yend + slopeYX;
// 2nd end point calcs ommited
xend = Math.round(x1);
yend = y1 + slopeYX * (xend - x1);
var xEnd = xend;
var yEnd = Math.round(yend);
for (var x = xStart; x < xEnd; x++){
if (yMajor){
plot(Math.round(errY)-1, x);
plot(Math.round(errY), x);
plot(Math.round(errY)+1, x);
//console.log(Math.round(errY), x);
//console.log(Math.round(errY)+1, x);
} else {
plot(x, Math.round(errY)-1);
plot(x, Math.round(errY));
plot(x, Math.round(errY)+1);
//console.log(x, Math.round(errY));
//console.log(x, Math.round(errY)+1);
}
errY += slopeYX;
}
}