From cccbdcc67fc093027c0325f0677f158e41c775ca Mon Sep 17 00:00:00 2001
From: GniLudio <50866361+GniLudio@users.noreply.github.com>
Date: Thu, 25 Jan 2024 23:12:47 +0100
Subject: [PATCH] Bouncing logic respects ball radius

---
 .../tutorial/advanced_animations/index.md     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
index 8bf52a9440d5c78..e517c5e765748c6 100644
--- a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -90,10 +90,10 @@ ball.draw();
 Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the `x` and `y` position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the `draw` method:
 
 ```js
-if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+if (ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius) {
   ball.vy = -ball.vy;
 }
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+if (ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) {
   ball.vx = -ball.vx;
 }
 ```
@@ -137,10 +137,10 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) {
     ball.vx = -ball.vx;
   }
 
@@ -214,10 +214,10 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) {
     ball.vx = -ball.vx;
   }
 
@@ -288,10 +288,10 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball.radius) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) {
     ball.vx = -ball.vx;
   }
 
@@ -360,10 +360,10 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (ball.y + ball.vy > canvas.height - ball.radius || ball.y + ball.vy < ball radius) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (ball.x + ball.vx > canvas.width - ball.radius || ball.x + ball.vx < ball.radius) {
     ball.vx = -ball.vx;
   }