JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<img id="logo"...

CSS

html, body { margin: 0; }
#logo { display: none; }

JavaScript

var sx = 0
var sy = 0
var c = document.getElementById( 'canvas' )
var g = c.getContext( '2d' )
var points = []

var img = document.getElementById( 'logo' )

c.width = img.width
c.height = img.height
g.drawImage( img, 0, 0 )   

c.addEventListener( 'click', function( e ) {

    var pixel = g.getImageData( e.x, e.y, 1, 1 ).data
    pixel = [
        parseFloat( ( pixel[0] / 255 ).toFixed(3) ),
        parseFloat( ( pixel[1] / 255 ).toFixed(3) ),
        parseFloat( ( pixel[2] / 255 ).toFixed(3) ),
        1.0
    ]
    points.push({
        c: pixel,
        x: e.x - sx,
        y: e.y - sy
    })
    
    g.beginPath()
    g.arc( e.x, e.y, 2, 0, Math.PI*2 )
    g.stroke()
})

document.addEventListener( 'keyup', function( e ) {
    if ( e.which == 32 ) console.log( JSON.stringify( points ) )
})