# How to draw line given X and Y coords. Stair-step algorigthm?

I am trying to create a 2D board game.  To move a game piece, you click on the game piece to select it, then move the mouse to the square you want the piece to move to.

I am wanting to draw a "path" as the mouse moves to the potential destination square, showing which squares the piece will move to, taking into account any obstacles the game piece will need to navigate around.

The part I am struggling with most is how to draw the path line.  For example, the line will look different based upon the game piece moving SOUTH (indicated in blue) vs moving EAST (indicated in red).

[NOTE:  I am not sure what this is called in gaming circles (the shape of the lines themselves).  Is it called aliasing?  Anti-aliasing is supposed to "smooth"-out the "jagged" stair-step look of the lines formed (lines drawn at an angle, or circles).  I know that the letters I am typing, when zoomed up to like 800% of normal size appear very jagged. ]

I am just wondering what the algorithm is called and where I might go for help on this (including here on EE, of course).

Example:
draw-line.png
LVL 5
###### Who is Participating?

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Web developerAuthor Commented:
Yep - this is what I was thinking of:

https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
0

Experts Exchange Solution brought to you by