A Grid slowing the moving element on JS canvas

I’m drawing a grid on a JavaScript canvas on this canvas I also have a moving element so the Grid can be on/off with a button all is well apart from the speed of the moving element when grid is on it becomes extremely slow. I’m not really sure where am I going wrong. Can someone please give me some help. Thank you

HTML

<div>
    <input type=button id="up" onClick=move_img(id); value='Up'>
    <input type=button id="down"  onClick=move_img(id); value='Down'>
    <input type=button id="left"  onClick=move_img(id); value='Left'>
    <input type=button id="right"  onClick=move_img(id); value='Right'>
    <input type=button id="stop"  onClick=move_img(id); value='Stop'>
    <input type=button id="grid"  onClick=gridOn(); value='Grid'>
    <br>
    <p></p>
</div>

JavaScript

    var isGrid = new Boolean(false);
    var canvas = document.getElementById("canvas");
    b = canvas.getContext("2d");

    var width = canvas.width = 600;
    var height = canvas.height = 400;
    
    document.body.appendChild(canvas);

    b.fillStyle = "#F0F8FF";
    b.fillRect(0, 0, canvas.width, canvas.height);

    var posX = 10;
    posY = 10;
    x = 0;
    y = 0;
    
    setInterval(function () {
   
        b.fillStyle = "#F0F8FF";
        b.fillRect(0, 0, width, height);
        posX += x;
        posY += y;

        if (posX > width - 20) {
            x = 0;
            posX = width - 20;
        }
        if (posX < 0) {
            x = 0;
            posX = 0;
        }
        if (posY > height - 20) {
            y = 0;
            posY = height - 20;
        }
        if (posY < 0) {
            y = 0;
            posY = 0;
        }

    b.fillStyle = "red";
    b.fillRect(posX, posY, 20, 20);
    
    /**  Grid ***/
    if(isGrid){
        drawGrid();
    }
    /**************/
    
    }, 5)
   
    function move_img(id) {
        switch (id) {
        case "down":
            moveDown();
            break;
        case "up":
            moveUp();
            break;
        case "left":
            moveLeft();
            break;
        case "right":
            moveRight();
            break;
        case "stop":
            moveStop();
            break;
        }
    } 
    
    function moveDown(){
        x = 0;
        y = 1;
    }
    function moveUp(){
        x = 0;
        y = -1;
    }
    function moveLeft(){
        x = -1;
        y = 0;
    }
    function moveRight(){
        x = 1;
        y = 0;
    }
    function moveStop(){
        x = 0;
        y = 0;
    }
    function gridOn() {
        if(isGrid){
            isGrid = false;
        }else{
            isGrid = true;
        }
    } 
    
    function drawGrid(){    
        b.strokeStyle = 'black';
        b.lineWidth = 0.5;
        
        for(i = 0; i<= 600; i=i+40){
            b.moveTo(i, 0);
            b.lineTo(i, 600);
            b.stroke();
        }
        for(j = 0; j<= 600; j=j+40){
            b.moveTo(0, j);
            b.lineTo(600, j);
            b.stroke();
        }
    }