JSFiddle - React, Tailwind, and code Playground

HTML

<button id="check"> Check </button>
<button id="draw"> Draw </button>
<button id="clear"> Clear </button>
<br>
<canvas id="canvas" width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

document.getElementById('check').addEventListener('click', function() {
    var blank = isCanvasBlank(document.getElementById('canvas'));

    if (blank) {
        alert('blank!');
    }
});

document.getElementById('draw').addEventListener('click', function() {
    drawOnCanvas(document.getElementById('canvas'));
});

document.getElementById('clear').addEventListener('click', function() {
    var canvas = document.getElementById('canvas');

    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
});

function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;

    return canvas.toDataURL() == blank.toDataURL();
}

function drawOnCanvas(canvas) {
    var context = canvas.getContext('2d');

    context.fillStyle = '#' + Math.floor(Math.random() * 16777215).toString(16);

    context.fillRect(Math.floor(Math.random() * canvas.width),
        Math.floor(Math.random() * canvas.height),
        Math.floor(Math.random() * canvas.width),
        Math.floor(Math.random() * canvas.height));
}