基于网格的照明引擎

我正在尝试使用JavaScript创建一个基于网格的阴影引擎。我的算法根据方块相对于光源的位置是否"在"方块后面来给方块着色。

这是我目前为止的算法:https://jsfiddle.net/jexqpfLf/

var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var light_x = 90;
var light_y = 110;
var block_x = 120;
var block_y = 120;
requestAnimationFrame(render);
function render() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    var vec1_x = block_x - light_x;
    var vec1_y = block_y - light_y;
    var vec1_mag = Math.sqrt(vec1_x * vec1_x + vec1_y * vec1_y);
    ctx.fillStyle = 'black';
    for (var x = 0; x < canvas.width; x += 10)
        for (var y = 0; y < canvas.width; y += 10) {
            var vec2_x = x - light_x;
            var vec2_y = y - light_y;
            var vec2_mag = Math.sqrt(vec2_x * vec2_x + vec2_y * vec2_y);
            var dotproduct = vec1_x * vec2_x + vec1_y * vec2_y;
            var angle = Math.acos(dotproduct / (vec1_mag * vec2_mag));
            if (vec2_mag > vec1_mag && angle < Math.PI / 8 / vec1_mag * 10)
                ctx.fillRect(x, y, 10, 10);
        }
    ctx.fillStyle = 'green';
    ctx.fillRect(light_x, light_y, 10, 10);
    ctx.fillStyle = 'red';
    ctx.fillRect(block_x, block_y, 10, 10);
    requestAnimationFrame(render);
}
onkeydown = function (e) {
    if (e.which == 65)
        light_x -= 10;
    if (e.which == 68)
        light_x += 10;
    if (e.which == 87)
        light_y -= 10;
    if (e.which == 83)
        light_y += 10;
}

不幸的是，正如你在演示中看到的，我发现一些角度有问题。一些应该涂上阴影的方块没有涂上阴影。这种情况发生在某些角度和距离(光源和块之间)，但不是其他的。例如，将光源置于(60,90)处也显示这些伪影。

我使用向量LP(从光到点)和LB(从光到块)，取它们的点积并除以它们的大小的乘积来找到阴影角度，然后根据块和光源之间的距离缩放这个角度。

这些工件可能是由于舍入错误造成的吗?还是算法本身有问题?如有任何帮助将不胜感激:-)