canvas performance

by suld2495

HTML

<!doctype html>
<html>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

    console.time('Draw CANVAS');

    for (let i = 0; i < 500; i++) {
        for (let j = 0; j < 500; j++) {
            ctx.fillStyle = getColor();
            ctx.fillRect(i, j, 1, 1);
        }
    }

    setTimeout(() => {
        console.timeEnd('Draw CANVAS');
    })

    function getColor() {
        let accessible = 'abcdef123456789';
        let str = '';

        for (let i = 0; i < 6; i++) {
            str += accessible[Math.floor(Math.random() * accessible.length)];
        }

        return `#${str}`;
    }
</script>
</body>
</html>