Объект не отображается в JS

Question

Я пытаюсь создать типичную игру-прорыв на JS. Все до сих пор работает отлично, за исключением того, что весло, которое я пытаюсь нарисовать, не появляется на экране. Ниже я предоставил jscode. Не могли бы вы предложить, в чем может быть проблема?

var canvas = document.getElementById ("myCanvas"); var ctx = canvas.getContext ("2d");

var x = canvas.width/2;
var y = canvas.height-30;

var dx = 2;
var dy = -2;

var ballRadius = 10;

/* Defining the parameters of the paddle and its starting point */

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;

/* Control variables */

var rightPressed = false;
var leftpressed = false;

/* Functions */

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y +=dy;

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
}

/* Speed of the ball */ 

setInterval(draw, 10);

Answer 1

Вы забыли вызвать функцию drawPaddle() внутри функции draw(). Попробуйте это,

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
    x += dx;
    y +=dy;

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
}