JSFiddle - React, Tailwind, and code Playground

by JH Yap

HTML

<canvas id="myCanvas" width="300" height="300"></canvas>
<input type="button" id="setColor" value="Change Color"></input>

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.rect(20, 10, 200, 100);
context.fillStyle = getRandomColor();
context.fill();


var btn = document.getElementById('setColor');

btn.onclick = function(){
    context.fillStyle = getRandomColor();
    context.fill();
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}