Deleting a certain line from a canvas without affecting arc 😑

Question

I want to clear the canvas with condition on each iteration, may be performance. And, the condition is to only want to clear the line and not the arc.

I already tried chatGPT, save and restore method in JS for save the previous canvas, but it didn't work for me.

This line of code uses the clearRect method of the 2D rendering context to clear the canvas by specifying the x, y, width, and height. But, its clear the whole canvas which I don't want as I mention earlier.

For the better context of my question, you can see this image.

Any answer will be appreciated.

const canvas = document.getElementById('cvs')
const ctx = canvas.getContext('2d')
const CH = (canvas.height = 400)
const CW = (canvas.width = 400)
canvas.style.background = 'black'

const vs = () => {

    let radius = 50;
    let i = 0;

    setInterval(() => {
        let x = Math.cos(i) * radius + CH / 2;
        let y = Math.sin(i) * radius + CW / 2;

        if(i>2*Math.PI)return clearInterval();
        
        /* if I add `ctx.clearRect(0, 0, CW, CH);` it's clear the whole canvas, I don't want that type of behavior */
        
        ctx.beginPath();
        ctx.arc(x,y,1,0,2*Math.PI)
        ctx.closePath();
        ctx.strokeStyle = "white";
        ctx.stroke();
  
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(x, y);
        ctx.closePath();

        ctx.strokeStyle = "red";
        ctx.stroke();
        
        i += 0.01;
    }, 10)
}

vs();

body{
display:grid;
place-items:center;
min-height:100vh;
background:gray;
}

<canvas id="cvs"></canvas>

Answer 1

I already tried chatGPT, save and restore method in JS for save the previous canvas, but it didn't work for me.

Those store-restore the context state, color in use and the like. If you look into the box in the top-right, coincidentally you will see a link "Temporary policy: ChatGPT is banned" - that has a reason.

What you need is storing-restoring the bitmap data, getImageData() and putImageData() are the methods for that. If you're concerned about performance (though it feels a bit early), the arc() call can be skipped too, as with this step-size you won't end up with a dotted circle (of course the strokeRect() I'm using instead could be then replaced with direct pixel manipulation, but a cool thing is that it provides anti-aliasing):

const canvas = document.getElementById('cvs')
const ctx = canvas.getContext('2d')
const CH = (canvas.height = 400)
const CW = (canvas.width = 400)
canvas.style.background = 'black'

const vs = () => {

  let radius = 50;
  let i = 0;

  let backup = false;

  setInterval(() => {
    let x = Math.cos(i) * radius + CH / 2;
    let y = Math.sin(i) * radius + CW / 2;

    if (backup) ctx.putImageData(backup, 0, 0);

    if (i > 2 * Math.PI) return clearInterval();

    ctx.strokeStyle = "white";
    ctx.strokeRect(x, y, 2, 2);
    /*      ctx.beginPath();
            ctx.arc(x,y,1,0,2*Math.PI)
            ctx.closePath();
            ctx.strokeStyle = "white";
            ctx.stroke();*/

    backup = ctx.getImageData(0, 0, x + 2, y + 2); // 0 or 1 will have some red pixels

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(x, y);
    ctx.closePath();

    ctx.strokeStyle = "red";
    ctx.stroke();

    i += 0.01;
  }, 10)
}

vs();

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: gray;
}

<canvas id="cvs"></canvas>