Question

Here’s my code. For some reason it draws the lines in mostly grey.

It would appear that some of the lines are being drawn with two stroke styles on top of each other, even though my draw calls don’t actually overlap. Some of the lines are white with inner grey. My white lines are thicker than my grey ones so obviously it’s drawing two lines. Are canvas draw calls asynchronous or something?

Any idea why?

        for (var i=0; i<minor_lanes.length; i++) {
            connect(minor_lanes[i], "#333", 3);
        }

        for (var i=0; i<major_lanes.length; i++) {
            connect(major_lanes[i], "#fff", 4);
        }

        for (var i=0; i<limited_lanes.length; i++) {
            connect(limited_lanes[i], "#FFFF99", 2);
        }

        function connect(id, color, width) {
            if (!id) {
                return;
            }
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            $('#' + id).each(function() {
            var laneX = parseInt($(this).css('left')) + $(this).width()/2;
            var laneY = parseInt($(this).css('top')) + $(this).height()/2;
            ctx.moveTo(x,y);
            ctx.lineTo(laneX, laneY);
            ctx.stroke();
            });
        }

Answer 1

I think you forget

ctx.beginPath();
// draw path
// stroke
ctx.closePath();