I am not getting output using setInterval

Question

I am getting no output. I'm trying to understand getInterval as I am new to JS, but can't work out why I don't get the lines displayed.

var Canvas = {
    canvas : undefined,
    ctx : undefined
};
var Mouse = {
    x : [0],
    y : [0]
};
function Drawing(width, colour){
    this.width = width;
    this.colour = colour;
    Drawing.prototype.output = function(ctx){
        ctx.strokeStyle = this.colour;
        ctx.lineWidth = this.width;
        for (var i = 0; i < Mouse.x.length-1; i++) {
            ctx.beginPath();
            ctx.moveTo(Mouse.x[i], Mouse.y[i]);
            ctx.lineTo(Mouse.x[i+1], Mouse.y[i+1]);
            ctx.stroke();
        }
    }
}
Canvas.start = function () {
    function catchAction(evt) {
        Mouse.x[Mouse.x.length] = evt.pageX; 
        Mouse.y[Mouse.y.length] = evt.pageY;
    }
        Canvas.canvas = document.getElementById("myCanvas");
        Canvas.canvas.width = Canvas.canvas.height = 600;
        Canvas.ctx = Canvas.canvas.getContext('2d');
        let drawing = new Drawing(10, 'red');
        Canvas.canvas.addEventListener("mousedown", catchAction, false);
        Canvas.canvas.addEventListener("touchstart", catchAction, false);
        window.setInterval(drawing.output(Canvas.ctx), 500);
    };
document.addEventListener( 'DOMContentLoaded', Canvas.start);

Also I am getting a Violation: Added non-passive event listener.

re: non-passive event listener, I've never seen that error myself, but try here for help: https://stackoverflow.com/a/46542547/740639 — Walter Stabosz, Oct 05 '21 at 20:26

Walter Stabosz · Answer 1 · 2021-10-07T15:50:08.257

0

The first argument to setInterval should be a string if you are going to pass in code like that.

https://developer.mozilla.org/en-US/docs/Web/API/setInterval .

Try changing it to a function like this:

window.setInterval(() => {drawing.output(Canvas.ctx)}, 500);

also try this for you other error:

document.addEventListener( 'DOMContentLoaded', (e) => {Canvas.start()});

NOTE: I haven't tested either suggestion, but I'm 99% certain the setInterval one is correct.

edited Oct 07 '21 at 15:50

answered Oct 05 '21 at 20:25

Walter Stabosz

7,447
5
43
75

The answer to the first part of the question was spot on and fixed the main issue. The second answer didn't work. The problem seems to be caused by adding the touchstart event listener for some reason. If I take it out, the violation doesn't get reported - although that removes the touchscreen functionality. – Nic Oatridge Oct 07 '21 at 15:18
I updated my answer. I forgot to add parenthesis at the end of `Canvas.start`, it should be `Canvas.start()`. The parenthesis is what tell the JS interpreter to call the `start` function. Without the parenthesis, `Canvas.start` is a reference to the function. – Walter Stabosz Oct 07 '21 at 15:56
Incidentally, some languages like VB will execute a function without parenthesis in the code. That always drove me crazy because I'm mistake a function call for a property. ex: `Dim lastName as String = person.LastName`, and `LastName` was actually a function that would manipulate state. (I've worked on some nasty code in my days) – Walter Stabosz Oct 07 '21 at 15:58
Ah, that works. Should have guessed I needed the parentheses and the code works. However, it still doesn't stop the violation being called. It is definitely related to Canvas.canvas.addEventListener("touchstart", catchAction, false); The full message is "[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952" but the link doesn't really help me but by the same token the violation doesn't seem to cause any performance issues. – Nic Oatridge Oct 08 '21 at 18:33
I think this is what you want `document.addEventListener('touchstart', catchAction, {passive: true, capture: false});` . also, read this for more info https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener – Walter Stabosz Oct 08 '21 at 20:05
1

This has solved the problem. That has so confused me for so long so I am enormously grateful for your help. – Nic Oatridge Oct 10 '21 at 18:24

I am not getting output using setInterval

1 Answers1