Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

36
Views
I am not getting output using setInterval

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.

7 months ago · Juan Pablo Isaza
1 answers
Answer question

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.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.