HTML5 Canvas: Not drawing

Question

I'm currently creating a simple program using HTML Canvas and Javascript. All that I need to happen is for a ball to be drawn at coordinates on the canvas and then move around using some velocity variables etc.

The issue is, I've created a Ball object as I intend to have multiple balls on screen at a time, however nothing is showing on my canvas.

I've read over this a few times, I'm receiving no errors so I'm struggling to figure out what's happening with this.

EDIT: I've added a console log to check the drawSelf() is running, which it is but still no error/result

CODE

<!DOCTYPE html>
<html>
    <head>
        <title>Bouncing Ball</title>
    </head>

    <script>
    var Date
    var canvas;
    var ctx;
    var dx=5;
    var dy=5;

    function init(){
        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');
        setInterval(draw,10);
        console.log("Initialised: " + new Date());
    }

    function Ball(x, y, dx, dy){
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;

        this.drawSelf = function () {
            ctx.beginPath();
            ctx.fillStyle = "#4286f4";
            ctx.arc(this.x,this.y,20,0,Math.PI*2,true);
            ctx.closePath();
            console.log("Ball is drawing self!");

            if(this.x<0 || this.x>800){ 
                dx=-dx; 
            }
            if(this.y<0 || this.y>800){
            dy=-dy; 
            }

            this.x+=this.dx; 
            this.y+=this.dy;
        }

        this.getX = function () {
            console.log("X:" + this.x);
            console.log("Y:" + this.y);
            }
        }

    //Creating Ball object.
    let ball1 = new Ball(400, 400, 5, 5);

    function draw(){
        ball1.drawSelf();
    }
    </script>
    <body onLoad="init()">
    <div id="canvas-area">
        <canvas id="game" width="800" height="800"></canvas>
    </div>
    </body>
<html>

Answer 1

You forgot to add ctx.stroke() or ctx.fill(), taken from the Mozilla docs

this.drawSelf = function () {
        ctx.beginPath();
        ctx.fillStyle = "#4286f4";
        ctx.arc(this.x,this.y,20,0,Math.PI*2,true);
        ctx.stroke();
        ctx.closePath();
        console.log("Ball is drawing self!");

        if(this.x<0 || this.x>800){ 
            dx=-dx; 
        }
        if(this.y<0 || this.y>800){
        dy=-dy; 
        }

        this.x+=this.dx; 
        this.y+=this.dy;
    }

Also sidenote, since you don't set the background every draw, your canvas will just add the ball to it's current state, resulting in a cool pattern , but something you probably don't want. To fix this, make this your draw method.

function draw(){
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ball1.drawSelf();
}

EDIT: Instead of using setInterval I recommend using requestAnimationFrame. You can read more about it here

HTML5 Canvas: Not drawing

Question

1 answers

solution1
2 ACCPTED 2019-04-24 09:54:29

HTML5 Canvas: Not drawing

Question

1 answers

solution1 2 ACCPTED 2019-04-24 09:54:29

solution1
2 ACCPTED 2019-04-24 09:54:29