JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<canvas id="canvas" width="320" height="480"></canvas>

CoffeeScript

# http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/

colors = [
    'rgba(230, 94, 76, 0.1)'
    'rgba(245, 140, 34, 0.1)'
    'rgba(230, 216, 34, 0.1)'
    'rgba(134, 235, 149, 0.1)'
    'rgba(133, 192, 255, 0.1)'
    'rgba(153, 93, 179, 0.1)'
]

solutionColors = [
    'rgba(230, 94, 76, 1)'
    'rgba(245, 140, 34, 1)'
    'rgba(230, 216, 34, 1)'
    'rgba(134, 235, 149, 1)'
    'rgba(133, 192, 255, 1)'
    'rgba(153, 93, 179, 1)'
]

ctx = document.getElementById('canvas').getContext '2d'

###
canvas = document.createElement('canvas')
canvas.width = 320
canvas.height = 480
ctx = canvas.getContext '2d'
###

ctx.fillStyle = '#ffffff'
ctx.fillRect 0, 0, 10, 60
for color, index in colors
    ctx.fillStyle = color
    ctx.fillRect 0, index * 10, 10, colors.length * 10 - index * 10

for index in [0..colors.length - 1]
    [r,g,b,a] = ctx.getImageData(5, 5 + index * 10, 1, 1).data
    console.log("'#{r},#{g},#{b},#{a}': '#{solutionColors[index]}'");