My goal is to create an undo and redo button in my javascript program

Question

I am a beginner at HTML and JavaScript, and I have decided to try and build a small paint application. The user fills in squares in a grid by clicking down, dragging their mouse along the canvas, and releasing the mouse. What logic could I go about creating an undo and redo button? What kind of arrays could I create to handle different brush sizes and squares filled in? Here is my JavaScript code. If it is helpful to see my application in action, I have it running on GitHub: https://lenaviaz.github.io/ Thank you.

var size = 15;
var width = 10*size;
var height =  10*size;
//initial color before user selects one 
var s = 'black';
var isDrawing;
var scaleX = 1;
var scaleY = 1;


window.onload = function() {
//canvas element 
 var ctx = document.getElementById('canvas').getContext('2d');

function draw(){

    for(y = 0; y < 40; y++){
        for(x = 0; x < 40; x++){
         rect = ctx.rect(x*size, y*size, size, size)
            
        }
    }
   
    ctx.strokeStyle = "white";
    ctx.lineWidth = 0.05;
    ctx.stroke(); 
    
    
    for (y = 0; y <= 40; y++) {
        for (x = 0; x <= 40; x++) {
         let rect = ctx.rect(x * size, y * size, size, size);
         let isEven = y%2==0;
    
         if (x % 2 === 0) {
            ctx.fillStyle = isEven? "#d3d3d3":"white";
          } else {
            ctx.fillStyle = isEven?"white":"#d3d3d3";
          }
          ctx.fillRect(x*size, y*size, size, size);
        }
      }
      ctx.strokeStyle = "white";
      ctx.lineWidth = 0.05;
      ctx.stroke();
}   
    draw();
   
    
     function initCanvas(){

        function clickOne(){ 
            scaleX=2;
            scaleY=2;
        } document.getElementById("size1").addEventListener("click", clickOne);

        function clickTwo(){ 
            scaleX=3;
            scaleY=3;
        } document.getElementById("size2").addEventListener("click", clickTwo);

        function clickThree(){ 
            scaleX=4;
            scaleY=4;
        } document.getElementById("size3").addEventListener("click", clickThree);

    
  
    // function to fill the rectangle
     function fill(s, fx, fy) {
        ctx.fillStyle = s;
        ctx.fillRect(fx * size, fy * size, size*scaleX, size*scaleY);
    }
   
    
   
    //allows user to see coordinates of their mouse on the grid
    ctx.canvas.addEventListener('mousemove', function(event){
        var mouseX = event.offsetX;
        var mouseY = event.offsetY;
        var corX = mouseX / size;
        var corY = mouseY / size;

        var status = document.getElementById('status');
       
        // generates the x and y coordinate, +1 because the first coordinate should be (1,1)
        var x = Math.floor(corX) + 1;
        var y = Math.floor(corY) + 1;
       //displays coordinate onscreen
        statusX.innerHTML = "MouseX : " + x;
        statusY.innerHTML = "MouseY : " + y;
    });

    //fill in all the functions, gets called when user clicks on the color
    //edited out to save space/time, functions change value of s to change color

   
    ctx.canvas.addEventListener('mousedown', function(event){
    
        var mouseX = event.offsetX;
        var mouseY = event.offsetY;
        var fx = ~~ (mouseX / size);
        var fy = ~~ (mouseY / size);

        fill(s, fx, fy)
        isDrawing = true;
    });

    ctx.canvas.addEventListener('mousemove', function(event){
    
        if(isDrawing == true){
        var mouseX = event.offsetX;
        var mouseY = event.offsetY;
        var fx = ~~ (mouseX / size);
        var fy = ~~ (mouseY / size);

        fill(s, fx, fy)
        }
    });
    ctx.canvas.addEventListener('mouseup', function(event){
      isDrawing = false;
    });



}
window.addEventListener('load', function(event) {
    initCanvas();
});
initCanvas();
}