Quería presentar un número fijo de círculos (en este caso, 10) en el lienzo con una línea que se mueve de un lado a otro, la función de círculos se activa para cada cuadro que ejecuta la función de bucle, así que hay una manera de detener este comportamiento. Ni siquiera estoy seguro de si estoy pensando bien al hacer que los círculos se disparen una vez.
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); fetch("http://api.open-notify.org/astros.json") .then((res) => res.json()) .then((data) => { var x = 0; var s = 1; function circles() { for (var i = 0; i < data.number; i++) { let randW = Math.floor(Math.random() * (290 - 10) + 10); let randH = Math.floor(Math.random() * (140 - 10) + 10); ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(randW, randH, 5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); } } function draw() { // ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10) circles(); ctx.fill(); ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); x += s; ctx.strokeStyle = "white"; ctx.stroke(); if (x == canvas.width || x == 0) { s = s * -1; } } // setInterval(draw, 10); function loop() { ctx.clearRect(0,0,canvas.width, canvas.height); draw(); requestAnimationFrame(loop); } requestAnimationFrame(loop); });Verifique el enfoque con 2 elementos de lienzo diferentes y el uso separado de las funciones de dibujo:
const canvas = document.querySelector(".canvas-1"); const ctx = canvas.getContext("2d"); const canvas2 = document.querySelector(".canvas-2"); const ctx2 = canvas2.getContext("2d"); // fetch("http://api.open-notify.org/astros.json") // .then((res) => res.json()) // .then((data) => { const data = JSON.parse('{"message": "success", "people": [{"name": "Mark Vande Hei", "craft": "ISS"}, {"name": "Pyotr Dubrov", "craft": "ISS"}, {"name": "Anton Shkaplerov", "craft": "ISS"}, {"name": "Zhai Zhigang", "craft": "Shenzhou 13"}, {"name": "Wang Yaping", "craft": "Shenzhou 13"}, {"name": "Ye Guangfu", "craft": "Shenzhou 13"}, {"name": "Raja Chari", "craft": "ISS"}, {"name": "Tom Marshburn", "craft": "ISS"}, {"name": "Kayla Barron", "craft": "ISS"}, {"name": "Matthias Maurer", "craft": "ISS"}], "number": 10}'); var x = 0; var s = 1; function circles() { for (var i = 0; i < data.number; i++) { let randW = Math.floor(Math.random() * (290 - 10) + 10); let randH = Math.floor(Math.random() * (140 - 10) + 10); ctx.beginPath(); ctx.fillStyle = "red"; ctx.arc(randW, randH, 5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); } } function draw() { // ctx.clearRect(0, 0, canvas.width, canvas.height); // // use with setInterval(draw,10) // circles(); ctx2.fill(); ctx2.beginPath(); ctx2.moveTo(x, 0); ctx2.lineTo(x, canvas.height); x += s; ctx2.strokeStyle = "white"; ctx2.stroke(); if (x == canvas2.width || x == 0) { s = s * -1; } } circles(); function loop() { ctx2.clearRect(0,0,canvas.width, canvas.height); draw(); requestAnimationFrame(loop); } loop(); canvas { height: 500px; width: 500px; border: solid 1px; background: rgba(0, 0, 0, 0.1); position: absolute; } <canvas class="canvas-1"></canvas> <canvas class="canvas-2"></canvas>