JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<canvas></canvas>

JavaScript

const randColor = () => 'rgb('+Array.apply(null, Array(3)).map(() => Math.round(Math.random()*255)).join(',')+')'

const $ = el => document.querySelector(el)

const canvas = $('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight
const ctx = canvas.getContext('2d')
const squares = [
	[`rgb(0,0,0)`]
]
const render = () => {
	ctx.clearRect(0, 0, canvas.width, canvas.height)
  squares.forEach((sq, idx) => {
  ctx.fillStyle = sq
  ctx.fillRect(1*idx+100,1*idx+100,100,100)
  })
}
canvas.addEventListener('mousemove', e => {
  let pixel = ctx.getImageData(e.clientX - canvas.offsetTop, e.clientY - canvas.offsetLeft, 1, 1).data
  let square = squares.filter(el => el[1] == `rgb(${pixel[0]},${pixel[1]},${pixel[2]})`)[0]
  squares.splice(squares.indexOf(square), 0, randColor())
  render()
})
render()