JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400" style="width:400px; height:400px;"></canvas>

<input id="but" type="button" value="clear canvas" onclick="ClearCanvas()">

JavaScript

can = document.getElementById('canvas');
    ctx = can.getContext("2d");
    
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, can.width, can.height);
    console.log("Before" + can.width);
    
    //ctx.scale(0.4, 0.4);
    
    ctx.fillStyle = 'rgb(105,180,235)';
    can.width = 100;
    can.height = 100;
    ctx.fillRect(0, 0, can.width, can.height);
    console.log("After" + can.width);
    
    $("#but").click(function()
    {
        var ctx = document.getElementById('canvas').getContext("2d");
        
        //ctx.scale(4, 4);
        //ctx.clearRect(0, 0, can.width, can.height);
        ctx.rect(0, 0, can.width, can.height);
        ctx.fillStyle="black";
        ctx.fill();
    });