Odtnhj

const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');
// buffer canvas and screen canvas have same width and height

// draw a circle on buffer canvas
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();

// render to screen canvas (working)
screen.drawImage(buffer, 0, 0);

// clear canvas when click
canvas.addEventListener('click', () => 
 context.clearRect(0, 0, buffer.width, buffer.height);
 screen.drawImage(buffer, 0, 0); // not working
 // only working with `screen.clearRect(0, 0, canvas.width, canvas.height);`
)

Like the code above, when using an empty canvas to clear another canvas, it's not working. (HTML only with <canvas id="canvas"></canvas> tag). Live Demo on https://jsfiddle.net/wjvtzng7/

If we write down what you are doing, we get:

One offscreen canvas "buffer", and one visible canvas "screen".

Step by step,

• 
  draw a circle on "buffer"
  
  At this stage
  
  
  • "buffer" represents a circle,
  
  
  • "screen" represents an empty image (transparent pixels).
  
  


• 
  draw "buffer" on "screen" canvas
  
  
  • "buffer" represents a circle,
  
  
  • "screen" represents a circle
    
  
  


• 
  clear "buffer"
  
  
  • "buffer" represents an empty image (transparent pixels)
    
  
  
  • "screen" represents a circle
  
  


• 
  draw "buffer" on "screen" canvas
  
  
  • "buffer" represents an empty image (transparent pixels)
    
  
  
  • "screen" represents a circle
  
  

It seems your confusion comes from the last bullet. But this operation could be rewritten as

• draw an empty image (transparent pixels) to an image that represents a circle.

This indeed does nothing... at least in normal compositing mode source-over where drawing a fully transparent pixel does nothing. See alpha-compositing for more reads about it.

So if you wish to clear your "screen" canvas, you indeed need to clear it using the clearRect() method of the screen context. _{There are other ways, but don't use them.}

Now, I felt I should also point out that there are other compositing modes than source-over available, and that what you expected can actually be done with one of these: copy.

const buffer = document.createElement('canvas');
const context = buffer.getContext('2d');
const canvas = document.getElementById('canvas');
const screen = canvas.getContext('2d');

// initialize
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
buffer.width = window.innerWidth;
buffer.height = window.innerHeight;
// draw a circle
context.beginPath();
context.arc(50, 50, 10, 0, Math.PI * 2);
context.fillStyle = 'rgba(156, 39, 176,1)';
context.fill();

// render to screen canvas
screen.drawImage(buffer, 0, 0);

// clear canvas when click
canvas.addEventListener('click', () => 
 context.clearRect(0, 0, buffer.width, buffer.height);
 // only the next drawing operation on screen will be visible
 // everything else will get cleared out
 screen.globalCompositeOperation = "copy";
 screen.drawImage(buffer, 0, 0);
 // set back to default mode
 screen.globalCompositeOperation = "sourc-over";
)

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