Can anyone complete this?

Question

In this part, we will move the circle up a little bit every time the Jump button is clicked and also display the count value on the canvas.
Tasks:
1. In the onclick event of the Jump button, decrease the y position of the circle by 25 (y -= 25)
2. In the onclick event of the Jump button, clear the canvas, and draw the circle at its new position.
3. Also, draw the count variable's value as white text at position (20, 30).

jump.onclick = function() {
count += 1;
//changing the y position
y -= 25;
//clearing the canvas
context.clearRect(0, 0, 600, 400);

//redrawing the circle
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

//drawing the count value
context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}

Answer 1

window.onload = function() {
let jump = document.getElementById("jump");
let count = 0;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();

context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: 0", 20, 30);

jump.onclick = function() {
count += 1;
//changing the y position
y -= 25;
//clearing the canvas
context.clearRect(0, 0, 600, 400);

//redrawing the circle
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

//drawing the count value
context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}

}

Answer 2

Hey can You Provide Me Code For Last 2 Code Repo In Game Development In JavaScript

Answer 3

window.onload = function() {
let jump = document.getElementById("jump");
let count = 0;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var x = 300;
var y = 350;

context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();

context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: 0", 20, 30);

jump.onclick = function() {
count += 1;
//changing the y position
y -= 25;
//clearing the canvas
context.clearRect(0, 0, 600, 400);

//redrawing the circle
context.beginPath();
context.arc(x, y, 50, 0, 2 * Math.PI);
context.fillStyle="red";
context.fill();

//drawing the count value
context.font = '25px Arial';
context.fillStyle = 'white';
context.fillText("Count: " + count, 20, 30);
}

}