Рисование круга поверх дорожки - HTML 5

Question

Я пытаюсь нарисовать путь, используя moveTo и lineTo, а поверх линии определенных точек я хочу нарисовать небольшой круг, указывающий координаты точки на плоскости xy.

Пока у меня есть следующее:

function draw() 
{ 
var canvas = document.getElementById("canvas"); 
if( canvas == NaN) alert('empty');  
var context = canvas.getContext("2d"); 

context.beginPath(); 
context.strokeStyle= "black"; 
context.lineWidth = 4;

context.moveTo(zx, zy + my); 

    for(var s in resources)
    {
        var array = resources[s];  
        // foreach pair inside a series..
        for(var a in array)
        {
            var x = array[a]; 

            context.strokeStyle="black";    
            context.lineTo(zx + x[0] + 5, zy + my - x[1]);   
            context.stroke(); 
            context.beginPath(); 

            context.strokeStyle="red";  
            context.arc(zx + x[0] + 5, zy + my - x[1], 1, 0, 2*Math.PI, false);     
            context.stroke(); 
            context.closePath();  

        }

    }
}

Что приводит к правильному рисованию пути, но я вижу только красный круг в последней точке. Другие точки скрыты под черным путем.

Answer 1

Я думаю, вам нужно нарисовать дуги индивидуально, как отдельные контуры, после того как вы нарисовали свою основную фигуру.