javascript – Need help with fixing Optimized Raycasting / Line of Sight algorithm

I’m trying to implement collision detection with raycasting for my 2D javascript game. The game uses equally-sized tiles as its level structure so to optimize collision detecton I’m trying to use a LOS algorithm very similar to the one at the bottom of this this article.

However, I’ve noticed that at certain angles, tiles that should be detected are not. I’m also noticing an overall “L” shape pattern where tiles that are beyond the ray’s endpoint are being detected when they don’t need to be. I don’t think these are intended behaviors of the algorithm but I can’t quite figure out what I could be doing wrong.

I’ve assembled a small jsfiddle here that includes the most relevant code and an additional visualization. You can click anywhere on the canvas to set a new ray origin.

Would appreciate any help. Thanks.