Рисование нескольких кругов на холсте с использованием результата JSON

Question

Мне нужно нарисовать несколько точек на холсте, используя данные, полученные из вызова json. Проблема в том, что отображается только один круг, хотя данные содержат 38 разных точек. Ниже приводится то, что я имею в настоящее время.

<style> 
     canvas, img { display:block; } 
     canvas { background:url(../../Content/Images/mapback.png) } 
</style> 

<canvas id="myCanvas" width="1022" height="550" style="margin: 0 auto"></canvas> 

<script> 
var myData = GetPlots(); 
var radius = 5; 
    function GetPlots(){ 
     var result = null; 
     $.ajax({async: false, 
      url: "/Home/MapPlots", 
     dataType: "json", 
     success: function(data){ 
      result = data; 
     }}); 
     return result; 
    }; 

    var mapCanvas = document.getElementById("myCanvas"); 

    var ctx = mapCanvas.getContext("2d"); 

    for (var i = 0; i < myData.length; i++) { 
       ctx.beginPath(); 
       ctx.arc(parseInt(myData[i].xCoord), parseInt(myData[i].yCoord), radius, 0, Math.PI * 2); 
       ctx.fillStyle = myData[i].typeColor; 
       ctx.fill(); 
    }; 
</script> 

Это то, что мой объект выглядит и заполняется:

Я был повсюду, пытаясь получить эту работу, и я только видел один круг. Любые идеи, в которых я ошибаюсь? Я был повсюду в google, и все, что я нахожу, говорит, что это правильно.

Answer 1

yCoord s в вашем примере объекта 664 и 776, которые находятся за пределами высоты вашего холста (550 пикселей).

Один из других объектов должен находиться в пределах, что объясняет, почему это единственный вид.