Can't see what I am drawing, but I can check console to see it's working, also it uploads to database

Question

Okay, if I have drawing.push(currentPath); under function startPath then I can draw, and see the mouse X and Y in the console, also I can save my drawing, but I can't see what I am drawing, its all black. but if I change drawing.push(currentPath); to drawing.push(currentPath.items); then I can see what I am drawing, but I can't save it to database because of array of nests.

1. What are my options here?
2. How can I make this code better?
3. How can I see what I am drawing and not be in the nested array?(because firebase doesnt allow it.)

Why I have so many nested array issues? Even when trying to add option to change color?

(Still learning p5.js and firestore, kinda new here, Sorry for being so annoying) I am using p5.js and firebase(firestore).

// Get a reference to the database service
//var database = firebase.database();

var drawing = [];
var currentPath = { items:[] };
var isDrawing = false;

function setup() {
    canvas = createCanvas(400,400);
    canvas.mousePressed(startPath);
    canvas.mouseReleased(endPath);
    canvas.parent('canvas');

    var saveButton = select('#saveButton');
    saveButton.mousePressed(saveDrawing);
}

function startPath() {
    isDrawing = true;
    currentPath = { items:[] }
    drawing.push(currentPath);
}

function endPath() {
    isDrawing = false;
}

function draw() {
    background(0);

    if (isDrawing){
        var point = {
            x: mouseX,
            y: mouseY
        }
    currentPath.items.push(point);
    }

    stroke(255);
    strokeWeight(7);
    noFill();
    for (var i = 0; i < drawing.length; i++) {
        var path = drawing[i];
        beginShape();
        for (var k = 0; k < path.length; k++) {
            vertex(path[k].x, path[k].y)
        }
        endShape();
    }
}

function saveDrawing(){
    db.collection('joonistused').add({
        drawing: drawing
    });
    var result = ref.push(data, dataSent);
    console.log(result.key)

    function dataSent(status) {
        console.log(status);
    }
}

Answer 1

The list of items is not drawing[i] . drawing[i] is a dictionary. The property .items of the dictionary contains the list of points.

Traverse drawing[i].items when you draw the shape, to solve the issue:

function draw() {

    // [...]

    for (var i = 0; i < drawing.length; i++) {

        var path = drawing[i].items; // <-----

        if (path) { 
            beginShape();
            for (var k = 0; k < path.length; k++) {
                vertex(path[k].x, path[k].y)
            }
            endShape();
        }
    }
}