See [working fiddle](https://jsfiddle.net/cxr7w035/90/). For your future reference: - This algorithm is called DDA (digital differential analyser). The [canon](https://www.thefreedictionary.com/canon)ical implementation requires cell co-ordinates to be a floating point value with each increment of 1 denoting the width of a full cell. Thus in `x`, the start of the first cell's edge is 0, the middle of the second cell is 1.5, 2/3s through the third cell is 2.67, etc. **The first thing you needed to do** was to divide your `mouseVector` values by `CELLSIZE` and work only in this form, never in `CELLSIZE`d form. - if you are learning from example code as in this case, do not change variable names within the function(s). Rather copy out your values from your custom vector into `x0, y0, x1, y1` as per the original as this helps you avoid at least one class of mistakes / errors when transcribing the algorithm, i.e. it is easier to transcribe this way. - use canonical / industry standard naming e.g. `raycastCollision` -> `rayMarch`. - simplify your naming: `drawCellOutline` -> `outlineCell` (matches your `fillCell`) - do not repeat yourself in function call parameters which you can include within the function itself e.g. `fillCell(x * CELLSIZE, y * CELLSIZE)` -> `fillCell(x, y)`; since they are grid-aligned they must all be of `CELLSIZE`, not so? - do not expect to use the advanced / optimised version of an algorithm until you have studied and understood the basic version. - in my opinion, always use [Allman brace style](https://en.wikipedia.org/wiki/Indentation_style#Allman_style), as it is easier to understand your blocks visually.