JSFiddle - React, Tailwind, and code Playground

by djwelsh

HTML

<canvas width="300" height="300"></canvas>
<button data-component="r">Red</button>
<button data-component="g">Green</button>
<button data-component="b">Blue</button>

JavaScript

let COLOR = {
	r : 0,
  g : 0,
  b : 0
}
let colorStep = 10;

document.querySelectorAll('button').forEach((item) => {
	item.addEventListener('click', (event) => {
  	let component = event.currentTarget.dataset.component;
    
    COLOR[component] += colorStep;
    
    let ctx = document.querySelector('canvas').getContext('2d');
    ctx.clearRect(0, 0, 300, 300);
    ctx.fillStyle = `rgb(${COLOR.r}, ${COLOR.g}, ${COLOR.b})`;
    ctx.fillRect(0, 0, 300, 300);
    
  });
});