We Keep Coding

Why isn't my rectangle showing up in HTML Canvas?

I am currently trying to build a Digital Table Tennis game and I have a lot in place so far, but whenever I run the program, the non-AI player's bat (The green rectangle) isn't showing up. It doesn't seem to be there at all. Is there some bug in my code? Also make sure to mainly pay attention to the bottom of the code, where the animate() function is declared. The outcome so far is here: https://Digital-Table-Tennis.programprodigy.repl.co. PLS HELP!
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
let mouse = {
x: null
}
window.onmousemove = e => {
mouse.x = e.x;
}
class Ball {
constructor() {
this.dx = Math.random() * 4 - 2;
this.dy = Math.random() * 4 - 2;
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
}
draw() {
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.arc(this.x, this.y, 10, 0, Math.PI * 2);
ctx.fill();
}
update() {
this.x += this.dx;
this.y += this.dy;
if (
this.x >= mouse.x &&
this.x <= mouse.x + 50 &&
this.y >= canvas.height - 5 &&
this.y <= canvas.height
) {
this.dx = -this.dx;
this.dy = -this.dy;
}
if (
this.x <= 0 ||
this.x >= canvas.width ||
this.y <= 0 ||
this.y >= canvas.height
) {
this.dx = -this.dx;
this.dy = -this.dy;
}
this.draw();
}
}
let ball = new Ball();
class AI {
constructor(lvl) {
this.x = 0;
this.color = 'red';
this.speed = lvl * 5;
}
draw() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, 0, 50, 5);
}
update() {
if (ball.y < canvas.height / 2) {
let distance = ball.x - this.x;
this.x += distance / this.speed;
}
if (
ball.x >= this.x &&
ball.x <= this.x + 50 &&
ball.y >= 0 &&
ball.y <= 5
) {
ball.dx = -ball.dx;
ball.dy = -ball.dy;
}
this.draw();
}
}
let ai_player = new AI(5);
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(mouse.x - 25, canvas.height - 5, 50, 5);
ball.update();
ai_player.update();
requestAnimationFrame(animate);
}
animate();

I actually have a red player rectangle on my end, however I had to scroll down to see it since the canvas height was more than my viewport.
You specified that the player rectangle should be green, but it's declared in animate() as ctx.fillStyle = 'red';.
As for solving the scrolling issues, it should be a quick CSS fix by specifying a max-width of 100vw and a max-height of 100vh on your canvas element, assuming you don't have any conflicting styles.

is there a way to solve "Uncaught TypeError: Cannot read property of undefined In JavaScript"?

I am newbie to Js just started a day ago. I have no idea about it and its pattern is actually freaking me out as i am from a python and C# background. Anyways, I am trying to spawn many circles by trying to creating an object array of it but it keeps giving me these errors. Altho when i work for only one object it perfectly works. I have no clue what to do, i looked up and found undefined means some is not initialized but everything seems defined to me. Kindly help me out a little
[![error message][1]][1]
canvas.height = window.innerHeight
canvas.width = window.innerWidth
var c = canvas.getContext('2d')
function circle(x,y, dx,dy, radius){
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.draw = function(){
c.beginPath()
c.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false)
c.strokeStyle = "blue"
c.stroke();
}
this.update = function() {
if( (this.x + this.radius > innerWidth) || (this.x - this.radius < 0))
{
this.dx = -this.dx
}
if( (this.y + this.radius > innerHeight) || (this.y - this.radius < 0))
{
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw();
}
}
var CircleArray = []
for(var i = 0 ; i < 10; i++)
{
var x = Math.random() * innerWidth
var y = Math.random() * innerHeight
var dx = 4
var dy = 4
var radius = 30
CircleArray.push(new circle(x,y,dx,dy, radius))
}
function animate()
{
requestAnimationFrame(animate)
c.clearRect(0,0, innerWidth, innerHeight)
for(var j = 0 ; j < CircleArray.length; j++)
{
CircleArray[i].update()
}
}
animate()```
[1]: https://i.stack.imgur.com/qWQto.png

Calling object methods in Javascript

I have practically no experience in JS (I mostly program in C#). I'm trying to create a random layout of circles (stars) in an html5 canvas and I have them moving at a random x and y velocity. I created a Star class to make many of these objects and manipulate them, but when I call the Update() method, I receive this TypeError:
TypeError: Cannot read property 'Update' of undefined
at animate (file:///F:/Code/Website/main.js:67:20)
at file:///F:/Code/Website/main.js:71:1
Here is the code that is throwing the error:
//Circle object
class Star
{
constructor(X, Y, VX, VY, R)
{
this.x = X;
this.y = Y;
this.vx = VX;
this.vy = VY;
this.r = R;
}
draw() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
c.strokeStyle = "blue";
c.stroke();
};
Update() {
if (this.x + this.r > pageWidth || this.x - this.r < 0) {
this.vx = -this.vx;
}
if (this.y + this.r > pageHeight || this.y - this.r < 0) {
this.vy = -this.vy;
}
//add velocity
this.x += this.vx;
this.y += this.vy;
this.draw();
};
}
for (var i = 0; i < 50; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var vx = Math.random();
var vy = Math.random();
var radius = 30;
let star = new Star(x, y, vx, vy, radius);
starArr.push(star);
}
console.log(starArr);
function animate() {
"use strict";
window.requestAnimationFrame(animate);
c.clearRect(0, 0, pageWidth, pageHeight);
for (var j = 0; j < starArr.length; j++); {
starArr[j].Update();
}
}
animate();

You have a typo at the for loop that calls the Update method: an extra semicolon ;
for (var j = 0; j < starArr.length; j++); {
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
let pageWidth = canvas.width = window.innerWidth;
let pageHeight = canvas.height = window.innerHeight;
let starArr = []
//Circle object
class Star{
constructor(X, Y, VX, VY, R){
this.x = X;
this.y = Y;
this.vx = VX;
this.vy = VY;
this.r = R;
}
draw() {
c.beginPath();
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
c.strokeStyle = "blue";
c.stroke();
};
Update() {
if (this.x + this.r > pageWidth || this.x - this.r < 0) {
this.vx = -this.vx;
}
if (this.y + this.r > pageHeight || this.y - this.r < 0) {
this.vy = -this.vy;
}
//add velocity
this.x += this.vx;
this.y += this.vy;
this.draw();
};
}
for (var i = 0; i < 50; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var vx = Math.random();
var vy = Math.random();
var radius = 30;
let star = new Star(x, y, vx, vy, radius);
starArr.push(star);
}
function animate() {
//"use strict";
window.requestAnimationFrame(animate);
c.clearRect(0, 0, pageWidth, pageHeight);
for (var j = 0; j < starArr.length; j++) {
starArr[j].Update();
}
}
animate();
<canvas></canvas>

Event Listener only listening to two figures on the screen in Javascript and HTML Canvas

I have run into a problem with my program, which essentially moves 100 figures on a browser window and changes their direction if the user presses a key down. In order to determine if a user has pressed a key, I used an event listener, but the problem is that the event listener only works for two of the figures on the screen. I can only change the direction of two figures, while the other figures continue to move around the screen and not respond to user input. I have attached all of my code below, and I would really appreciate if someone could help me figure out the problem! Thanks!
let canvas = document.querySelector("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
// console.log(innerWidth)
// console.log(innerHeight)
let c = canvas.getContext("2d")
let changeDirection = undefined
let repeatone = 0
let repeattwo = 0
window.addEventListener('keydown', function(event) {
repeatone = 0
repeattwo = 0
changeDirection = true
console.log(changeDirection)
})
window.addEventListener('keyup', function(event) {
changeDirection = false
console.log(changeDirection);
})
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}
// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.color = color
this.draw = function() {
// c.strokeStyle = this.color
c.beginPath()
c.strokeStyle = this.color
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.stroke()
}
this.update = function() {
repeatone += 1
if (changeDirection === true && repeatone <= 1) {
this.dx = -this.dx
this.dy = -this.dy
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
} else if (changeDirection === false || repeatone > 1) {
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
}
function Rectangle(x, y, dx, dy, height, width, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.height = height
this.width = width
this.color = color
this.draw = function() {
c.beginPath()
c.fillStyle = this.color
c.fillRect(this.x, this.y, this.width, this.height)
}
this.update = function() {
repeattwo += 1
if (changeDirection === true && repeattwo <= 1) {
this.dx = -this.dx
this.dy = -this.dy
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
} else if (changeDirection === false || repeattwo > 1) {
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
}
// let x = Math.floor((Math.random() * innerWidth) + 1)
// let dx = Math.floor((Math.random() * 10) + 1)
// let y = Math.floor((Math.random() * innerHeight) + 1)
// let dy = Math.floor((Math.random() * 10) + 1)
//
// console.log("X Value " + x)
// console.log("Y Value " + y)
// console.log("X Velocity Value " + dx)
// console.log("Y Velocity Value " + dy)
//
let rectangleArray = []
let circleArray = []
for (var i = 0; i < 50; i++) {
let xRect = Math.floor((Math.random() * innerWidth) + 1)
let dxRect = Math.floor((Math.random() * 10) + 1)
let yRect = Math.floor((Math.random() * innerHeight) + 1)
let dyRect = Math.floor((Math.random() * 10) + 1)
let heightRect = Math.floor((Math.random() * 250) + 1)
let widthRect = Math.floor((Math.random() * 250) + 1)
let colorRect = random_rgba()
let xCircle = Math.floor((Math.random() * innerWidth) + 1)
let dxCircle = Math.floor((Math.random() * 10) + 1)
let yCircle = Math.floor((Math.random() * innerHeight) + 1)
let dyCircle = Math.floor((Math.random() * 10) + 1)
let heightCircle = Math.floor((Math.random() * 250) + 1)
let widthCircle = Math.floor((Math.random() * 250) + 1)
let colorCircle = random_rgba()
let radiusCircle = Math.floor((Math.random() * 100) + 1)
rectangleArray.push(new Rectangle(xRect, yRect, dxRect, dyRect, heightRect, widthRect, colorRect))
circleArray.push(new Circle(xCircle, yCircle, dxCircle, dyCircle, radiusCircle, colorCircle))
}
console.log(circleArray)
console.log(rectangleArray)
function animate() {
requestAnimationFrame(animate)
c.clearRect(0, 0, innerWidth, innerHeight)
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].draw()
rectangleArray[i].update()
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].draw()
circleArray[i].update()
}
}
animate()
<canvas></canvas>

You had a lot of code, I remove a lot of it...
Take a look at the new logic under the addEventListener
Troubleshooting cases like this the first thing I do is reduce the scope:
you had 100 figures, I took it down to 6
your animation was too fast, I reduced the speed.
lot's of random stuff on the code that created the figures, I hard-coded some of that.
you had changeDirection, repeatone & repeattwo, I could not figure out what you needed those for so I remove them.
let canvas = document.querySelector("canvas")
canvas.width = canvas.height = innerWidth = innerHeight = 300
let c = canvas.getContext("2d")
window.addEventListener('keydown', function(event) {
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].dx *= -1
rectangleArray[i].dy *= -1
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].dx *= -1
circleArray[i].dy *= -1
}
})
function random_rgba() {
var o = Math.round,
r = Math.random,
s = 255;
return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}
// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.radius = radius
this.color = color
this.draw = function() {
// c.strokeStyle = this.color
c.beginPath()
c.strokeStyle = this.color
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.stroke()
}
this.update = function() {
if (this.x >= innerWidth - this.radius) {
this.dx = -this.dx
} else if (this.x <= this.radius) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.radius) {
this.dy = -this.dy
} else if (this.y <= this.radius) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
function Rectangle(x, y, dx, dy, height, width, color) {
this.x = x
this.y = y
this.dx = dx
this.dy = dy
this.height = height
this.width = width
this.color = color
this.draw = function() {
c.beginPath()
c.fillStyle = this.color
c.fillRect(this.x, this.y, this.width, this.height)
}
this.update = function() {
if (this.x >= innerWidth - this.width) {
this.dx = -this.dx
} else if (this.x <= 0) {
this.dx = -this.dx
}
if (this.y >= innerHeight - this.height) {
this.dy = -this.dy
} else if (this.y <= 0) {
this.dy = -this.dy
}
this.x += this.dx
this.y += this.dy
this.draw()
}
}
function randSpeed() {
return (Math.random() - 0.5) * 5
}
let rectangleArray = []
let circleArray = []
for (var i = 0; i < 3; i++) {
let heightRect = Math.floor((Math.random() * 100) + 1)
let widthRect = Math.floor((Math.random() * 100) + 1)
rectangleArray.push(new Rectangle(80, 80, randSpeed(), randSpeed(), heightRect, widthRect, random_rgba()))
let radiusCircle = Math.floor((Math.random() * 50) + 1)
circleArray.push(new Circle(80, 80, randSpeed(), randSpeed(), radiusCircle, random_rgba()))
}
function animate() {
requestAnimationFrame(animate)
c.clearRect(0, 0, innerWidth, innerHeight)
for (var i = 0; i < rectangleArray.length; i++) {
rectangleArray[i].draw()
rectangleArray[i].update()
}
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].draw()
circleArray[i].update()
}
}
animate()
<canvas></canvas>

clearTimeout not stopping canvas animation

So I have a simple canvas animation I want to start and stop using a toggle switch. The animation works fine and starts up, but the clearTimeout does not seem to work.
I made sure the variable "timeOut" is defined globally so it should have access to it, that seemed to be the usual advice in past questions similar to this one. Am I make a mistake somewhere else? Tried it on Firefox, Chrome and Chromium.
let timeOut;
function circles() {
let canvas = document.querySelector('canvas');
canvas.width = document.querySelector('canvas').offsetWidth;
canvas.height = document.querySelector('canvas').offsetHeight;
let c = canvas.getContext('2d');
let topRadius = 30;
let colorArray = [
'#ff0000',
'#00ff00',
'#0000ff',
]
let mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e) {
mouse.x = e.x;
mouse.y = e.y;
})
window.addEventListener('resize', function() {
canvas.width = document.querySelector('canvas').offsetWidth;
canvas.height = document.querySelector('canvas').offsetHeight;
init();
});
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dx;
this.radius = radius;
this.minRadius = radius;
this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
this.draw = function() {
if (this.radius < 0) {
this.radius = this.minRadius;
}
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
c.fillStyle = this.color;
c.fill();
}
this.update = function() {
if (this.y + this.radius > innerHeight || this.y - this.radius <= 0) {
this.dy = -this.dy;
}
if (this.x + this.radius > canvas.width|| this.x - this.radius <= 0) {
this.dx = -this.dx;
}
this.x+=this.dx;
this.y+=this.dy;
if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && mouse.y - this.y < 50 && mouse.y - this.y > -50) {
if (this.radius < topRadius) {
this.radius += 1;
}
} else if (this.radius > this.minRadius){
this.radius -= 1;
}
this.draw();
}
}
let circleArray = [];
function init() {
circleArray = [];
for (let i =0; i<50; i++) {
let radius = Math.random() * 10;
let x = Math.random() * (canvas.width - radius*2) + radius;
let y = Math.random() * (canvas.height - radius * 2) + radius;
let dx = (Math.random() - 0.5) * 4;
let dy = (Math.random() - 0.5 )* 4;
circleArray.push(new Circle(x, y, dx, dy, radius));
}
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0,0, canvas.width, innerHeight);
for(let i=0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
init();
animate();
}
$('#startstop').click(function() {
if(!timeOut) {
timeOut = setTimeout(circles, 1000);
} else {
clearTimeout(timeOut);
timeOut = null;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: flex; justify-content: space-around;">
<canvas style="width: 100px; height: 800px; background: red;"></canvas>
<div id="startstop">toggle</div>
</div>

You were super close to the solution ;)
in the function animate add line #3 (before for loop), that is having this value:
if (!timeOut) return;
Good luck!

This animation is not stopping because you call clearTimeout on your setTimeout but that only runs once. Your issue is further into the animate function. This relatively loops the requestAnimationFrame. You can store this as a request and then cancelAnimationFrame