How to remove the color inside canvas

Question

once again, I am asking for help.

I made a canvas which generates 40 moving points at different positions and changes everytime you refresh. They move at different speeds. The problem is the "trail" they leave behind, which is indicated by the black lines. I later planned to make the points bounce off from the canvas, but I would like to get rid of this issue first. I honestly dont understand why this happen and it is hard for me to research it properly, when I still struggle understanding JS.

I have put a reasonable amount of comments, which explains my code

body{
    background-color: #000000;
}

canvas {
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border: 10px solid #37c7f7;
    border-style: double;
    box-shadow: 0 0 20px 5px #37c7f7;
}

/*     background-color: #111416;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <link rel="stylesheet" href="canvas.css">
    <canvas id="myCanvas" width="800" height="800"></canvas>

    <script>
    
    // Get id from the canvas element
    var canvas = document.getElementById("myCanvas");

    // Provide 2D rendering context for the drawing surface of canvas
    var context = canvas.getContext("2d");

    // Get width and height of the canvas element
    var canvW = document.getElementById("myCanvas").width;
    var canvH = document.getElementById("myCanvas").height;
    
    // Create a random range of numbers
    const randomRange = (min, max) => {
        return Math.random () * (max - min) + min;
    }
   
    // Create empty array called
    const agents = [];

    // Class = Create multiple objects with the same properties 
    class Point {
        // Build the new object and pass parameters
        constructor(x, y){
            
            // Define properties
            // "this" refers to the scope of the class
            // class point contains propertie x and y
            this.x = x; 
            this.y = y;
        }
    }

    // Separate point from canvas
    // Make dot a new entity
    // Create another class

    class Agent {
        constructor(x, y){
            // First property is position using x and y parameters
            this.pos = new Point(x, y);

            // Define velocity of point.
            this.vel = new Point(randomRange(-1, 1), randomRange(-1, 1));

            // Create points with random radius
            this.radius = randomRange(4, 12);
        }

        update() {
            this.pos.x += this.vel.x;
            this.pos.y += this.vel.y;
        }

        // Create new method called draw
        // Pass paramter as reference to the context

        draw (context) {
            // Draw the points
            // Info: Added fill to make individual elements visible
            context.save();
            context.translate(this.pos.x, this.pos.y);
            context.beginPath();
            context.arc(0, 0, this.radius, 0, Math.PI * 2);
            context.lineWidth = 2;
            //context.strokeStyle = "white";
            context.fillStyle = "#37c7f7";
            context.fill();
            context.stroke();
            context.restore();

        }
        

    }

    // Create 40 random points using a for loop

    for (let i =0; i<40; i++){
        const x = randomRange(0, canvW);
        const y = randomRange(0, canvH);

        // push adds new items to the end of an array
        // push changes the length of an array
        // push returns the new length
        agents.push(new Agent (x, y));
    }

    // Animates the points
    const animate = () => {
        agents.forEach(agent => {
            agent.draw(context);
            agent.update();
        });
    
      requestAnimationFrame(animate);
    }

    animate();
    
    </script>

</body>
</html>

.

score 0 · Accepted Answer · answered Oct 17 '22 at 04:26

To remove the trail, you will need to also re-draw the background when you are re-drawing the points. You can change your animate function to the following:

const animate = () => {
  // this will reset your points from previous animation frame.
  context.save()
  context.fillStyle = 'white';
  context.fillRect(0, 0, canvW, canvH);
  context.restore()

  agents.forEach(agent => {
    agent.draw(context);
    agent.update();
  });
    
  requestAnimationFrame(animate);
}

If you want to have a trail that disappears after a while, you can play around with the color. Instead of pure white, you can reduce the opacity of white

context.fillStyle = 'rgba(255, 255, 255, 0.2)';

Thank you very much. I will play around with the answers you have provided me, My understanding of JS is sorely lacking. Much appreciated. — J.A.C.K., Oct 17 '22 at 09:27

How to remove the color inside canvas

1 Answers1