Canvas не рисует линии

[Dmitriy_14]

Ребята, помогите плиз. Новичок в JS, туплю...

рисую в цикле линии в Canvas, координаты линий находятся в числовом массиве. Почему-то, вот такое линии рисует:

context.moveTo(0, 50);
context.lineTo(100, 50);

а если передаю в качестве координат массив, то ничего не рисуется:

context.moveTo(masXX[i-1],masYY[i-1]);
context.lineTo(masXX[i-1],masYY[i]);

массив числовой. typeof выдает number

Помогите плиз

[Dmitriy_14]

Вот:

var a_canvas = doc.document.getElementById("a");   
var context = a_canvas.getContext("2d");
context.strokeStyle = "#000000";  
context.beginPath();
for (var i=0; i<nodecount;i++)
{
if (i>0)
{  
context.moveTo(masXX[i-1],masYY[i-1]);
context.lineTo(masXX[i-1],masYY[i]);    
context.moveTo(masXX[i-1],masYY[i]);
context.lineTo(masXX[i],masYY[i]);
}
}
context.stroke();

А массив заполняется в другой функции (x и y числа):

masXX[nodecount] = x+40;
masYY[nodecount] = y+40;

[Coriolan161]

Dmitriy_14,
Новичок в JS, проблема у тебя в индексе.
Вместо:

context.lineTo(masXX[i-1],masYY[i]);

Надо:

context.lineTo(masXX[i],masYY[i]);

[Dmitriy_14]

context.lineTo(masXX[i-1],masYY[i]);

Нет, здесь все правильно (линии рисуются из точки, где предыдущая линия была), но попробовал, как вы написали, все-равно не рисует.

[Coriolan161]

Dmitriy_14,
Ты что лестницу рисуешь?
У меня прокатило

var canvas = document.getElementById('canvas2');
    var context = canvas.getContext('2d');
    var XX = [0, 40, 80, 120, 160, 200, 240, 280, 320];
    var YY = [0, 40, 80, 120, 160, 200, 240, 280, 320];

    context.beginPath();

    var i = -1;
    while (++i < XX.length) {
      context.moveTo(XX[i], YY[i]);
      context.lineTo(XX[i], YY[i + 1]);
      context.moveTo(XX[i], YY[i + 1]);
      context.lineTo(XX[i + 1], YY[i + 1]);
    };
    context.stroke();

[Coriolan161]

Dmitriy_14,
Но это НЕ есть хорошо два массива координат иметь. Потому что можно где-то что-то недоглядеть
Лучше ты это..того..класс точек сделай и пихай объект-точку в массив

function Point(x, y) {
         var point = {};
         point.posX = x;
         point.posY = y;
         return point;
      }
 var myPoints = [];
 /*....*/
 myPoints.push(new Point(0, 0));

 Ну короче в таком ключе

[Dmitriy_14]

Dmitriy_14,
Но это НЕ есть хорошо два массива координат иметь. Потому что можно где-то что-то недоглядеть
Лучше ты это..того..класс точек сделай и пихай объект-точку в массив

Да, делаю рисовалку дерева DOM, для красоты линии к блокам.
Спасибо большое за совет!

[warren buffet]

context.stroke();

Так у тебя рисование снаружи цикла.

Какие еще точки? Две координаты, "двумерный" массив, берешь по токену и рисуешь. Запутали сами себя в трех соснах.

[Coriolan161]

warren buffet,

Так у тебя рисование снаружи цикла

context.stroke() делает обозначенные контуры видимыми. "Рисуется" всё в цикле

[Яростный Меч]

Немного оффтоп, но тем не менее:
если толщина линии - нечетное число пикселей (1, 3, 5, ...), то в lineTo и moveTo надо прибавить 0.5 ко всем координатам. Тогда линия будет четкая. А если не прибавить, то размытая.

это как раз для тех случаев, когда "подытоживаем" функцией stroke()