Canvas - записать координаты в массив

Это холст, на котором можно рисовать что-либо мышью. Моя задача состоит в том, чтобы сохранить координаты нарисованных линий в массиве. Для этого мне нужен цикл. Но при каждом новом действии все переменные обнуляются и вызываются заново. Так в данном коде alert(i) - постоянно выводит единицу "1", соответственно когда я добавляю координаты в массив, они всегда встают на одно и то же место и вместо накопления, просто заменяют друг друга.
Как можно записать нужные мне координаты в массив ?
window.onload = function() { canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d");
canvas.onmousedown = startDrawing; canvas.onmousemove = draw; };
function startDrawing(e) { // Начинаем рисовать isDrawing = true;
// Создаем новый путь (с текущим цветом и толщиной линии) context.beginPath();
// Нажатием левой кнопки мыши помещаем "кисть" на холст context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop); };
function draw(e) {
if (isDrawing == true) { var i = 0; // Определяем текущие координаты указателя мыши var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop;
// Рисуем линию до новой координаты context.lineTo(x, y); context.stroke();
var coord_arr = []; coord_arr.splice(i, 0, { x: x, y: y });
i++; alert(i) }
};

Ответ

Вам не нужно сохранять координаты линий, Вам нужно сохранять координаты курсора и рисовать по ним линии.
document.addEventListener( 'mousedown', document_mousedownHandler );
const path = { coords: null };
function document_mousedownHandler( event ){ path.coords = [];
document.removeEventListener( 'mousedown', document_mousedownHandler );
document.addEventListener( 'mouseup', document_mouseupHandler ); document.addEventListener( 'mousemove', document_mousemoveHandler ); } function document_mouseupHandler( event ){ path.coords = null;
document.removeEventListener( 'mouseup', document_mouseupHandler ); document.removeEventListener( 'mousemove', document_mousemoveHandler ); document.addEventListener( 'mousedown', document_mousedownHandler ); } function document_mousemoveHandler( event ){ path.coords.push( { x: event.clientX, y: event.clientY } ); }
Все что Вам осталось, это вызывать метод render и в цикле рисовать по координатам.