How to stop a function when another function starts in javascript?

Question

I have 2 buttons with respective functions: linemaker and circlemaker.

In linemaker I have 3 eventlisteners: mousedown, mousemove, and mouseup. This is so I can draw on the canvas.

In circlemaker I have 1 eventlistener: click. So I take a radius input from the user and with a click, they can make circles on the canvas.

But if they click both buttons, after they draw, there will be a circle at the end of the line. I want to stop this from happening, so if they click the circle button, the line button's function will stop. And vice versa.

Is there a way to do this? I don't use any setTimeout so I don't think I can use clearTimeout here.

Please share the relevant code. – trincot Mar 14 '21 at 09:28 — trincot, Mar 14 '21 at 09:28

score 0 · Answer 1 · answered Mar 14 '21 at 09:25

Make variables for this

let lineDrawing = false
let circleDrawing = false

Whenever the line function is called, check to make sure circleDrawing === false before setting lineDrawing = true and running the line drawing code. When the user stops drawing, set lineDrawing = false

Whenever the circle function is called, check to make sure lineDrawing === false before setting circleDrawing = true and running the circle drawing code. When the user stops drawing, set circleDrawing = false

score 0 · Accepted Answer · answered Mar 14 '21 at 10:28

As you didn't provide code, I will propose a way to draw lines and circles. First of all, I would use radio buttons for the selection of line or circle. You can apply CSS to give those a button look-n-feel if you really want to.

Then on the mousedown event, read out which radiobutton is checked.

On mousemove, just consider that the shape (line or circle) could be finished (no mouseup listener is needed). As long as another mousemove event follows, just adapt the last drawn shape.

For a circle, it seems more intuitive to not ask for a radius input, but use the mousemove event to determine the radius of the circle. This way the interface is very similar for drawing lines and circles, as two points can be used to define a line and to define a circle.

Here is a tiny demo:

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
let items = [];

function distance(a, b) {
    return Math.sqrt((b.x-a.x)**2 + (b.y-a.y)**2);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let {itemType, start, end} of items) {
        ctx.beginPath();
        if (itemType == "line") {
            ctx.moveTo(start.x, start.y);
            ctx.lineTo(end.x, end.y);
        } else {
            ctx.arc(start.x, start.y, distance(start, end), 0, 2*Math.PI);
        }
        ctx.stroke();
    }
}

function cursorPoint(e) {
    return { x: e.clientX - e.target.offsetLeft, y: e.clientY - e.target.offsetTop };
}

canvas.addEventListener("mousedown", function(e) {
    let itemType = document.querySelector("[name='shape']:checked").value;
    items.push({itemType, start: cursorPoint(e), end: cursorPoint(e)});
    draw();
});

canvas.addEventListener("mousemove", function(e) {
    if (e.buttons === 0) return;
    items[items.length-1].end = cursorPoint(e);
    draw();
});

canvas { border: 1px solid }

<canvas></canvas>
<br><input type="radio" name="shape" value="line" checked>Line
<br><input type="radio" name="shape" value="circle">Circle

How to stop a function when another function starts in javascript?

2 Answers2