Мой код, в котором я хочу нарисовать два движущихся круга, рисует два фиксированных квадрата. Почему? ⇐ Html

[Anonymous]

Это домашнее задание моего колледжа: мне нужно написать код на HTML, JavaScript и CSS двух объектов, перемещающихся через окно браузера. Мой выбор — два круга, но на самом деле код рисует два фиксированных квадрата. Я новичок, сейчас не совсем понимаю, что делаю. Мне нужна помощь.
Некоторые слова в коде написаны на португальском языке, потому что я бразилец.
Вот код:

Код: Выделить всё

let figura1 = document.getElementById("figura1");
let figura2 = document.getElementById("figura2");

let contexto1 = figura1.getContext('2d');
let contexto2 = figura2.getContext('2d');

const anguloInicial = 2;
const anguloFinal = 2;
const raio = 30;
let a = 150;
let b = 150;
let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
let da = 2;
let db = 2;

function figura_1() {
contexto1.beginPath();
contexto1.arc(x, y, raio, anguloInicial, anguloFinal, 2 * Math.PI);
contexto1.fillStyle = '#000';
contexto1.fill();
}

function figura_2() {
contexto2.beginPath();
contexto2.arc(a, b, raio, anguloInicial, anguloFinal, 2 * Math.PI);
contexto2.fillStyle = '#00f';
contexto2.fill();
}

function atualizar() {
contexto1.clearRect(0, 0, anguloInicial, anguloFinal);
contexto2.clearRect(0, 0, anguloInicial, anguloFinal);

x += dx;
y += dy;
a += da;
b += db;

if (x + raio > figura1.width || x - raio < 0) dx *= -1;
if (y + raio > figura1.height || y - raio < 0) dy *= -1;
if (a + raio > figura2.width || a - raio < 0) da *= -1;
if (b + raio > figura2.height || b - raio < 0) db *= -1;

figura_1();
figura_2();

requestAnimationFrame(atualizar);
}

atualizar()

Код: Выделить всё

canvas {
border: 2px solid black;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... quares-why