Paper js limit total path length

Question

I'm trying to develop a drawing feature with Paper Js in which a user realistically runs out of "ink".

Does anyone know how to do this? I've looked into limiting path length. But critically, my user shouldn't be limited in the path length of each stroke, but in the total path length of all their strokes. So imagine, e.g. you only have 1 ounce of ink (or e.g. 10 inches of ink) to use in your entire drawing.

The below is modified from the Paper js tutorial, but doesn't yet have the functionality of limiting the amount of digital ink a user has. I'm new to coding in js so any help would be appreciated!

var myPath;

function onMouseDown(event) {
    myPath = new Path();
    myPath.strokeColor = 'black';
}

function onMouseDrag(event) {
    myPath.add(event.point);
}

function onMouseUp(event) {
    var line = new Path({
    });
    line.strokeColor = 'black';
}

Answer 1

Here is a simple sketch demonstrating how you can achieve that.
Hopefully, the code will be clear enough for you to understand it and adapt it to your specific use case.

// Cumulated length for all drawn paths over which drawing stops.
const MAX_LENGTH = 1500;

// Stores drawn paths.
let paths = [];
// Stores currently drawing path.
let currentPath;

// On mouse down...
function onMouseDown(event) {
    // ...if drawing is still allowed...
    if (maxLengthIsExceeded()) {
        return;
    }
    // ...create a new path...
    currentPath = new Path({
        segments: [event.point],
        strokeColor: 'black'
    });
    // ...and add it to the stack.
    paths.push(currentPath);
}

// On mouse drag...
function onMouseDrag(event) {
    // ...if drawing is still allowed...
    if (maxLengthIsExceeded()) {
        return;
    }
    // ...continue drawing the current path.
    currentPath.add(event.point);
}

// Checks whether cumulated paths length exceeds the limit.
function maxLengthIsExceeded() {
    const totalLength = paths.reduce((sum, path) => sum += path.length, 0);
    return totalLength > MAX_LENGTH;
}