JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4 id="color">Drag to see RGB under mouse:</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}

JavaScript

$color = $("#color");

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var $canvas = $("#canvas");
        var canvasOffset = $canvas.offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var scrollX = $canvas.scrollLeft();
        var scrollY = $canvas.scrollTop();

        var data, imageWidth;

        var colors = new Image;
        colors.crossOrigin = "anonymous";
        colors.onload = function () {
            canvas.width = imageWidth = colors.width;
            canvas.height = colors.height;
            ctx.drawImage(colors, 0, 0);
            data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        }
        colors.src = "https://dl.dropboxusercontent.com/u/139992952/multple/colorWheel.jpg";


        function handleMouseMove(e) {
            e.preventDefault();
            e.stopPropagation();
            x = parseInt(e.clientX - offsetX);
            y = parseInt(e.clientY - offsetY);

            var offset = (imageWidth * y + x) * 4;
            var red = data[offset];
            var green = data[offset + 1];
            var blue = data[offset + 2];
            var alpha = data[offset + 3];

            $color.text("r:" + red + ", g:" + green + ", b:" + blue + ", a:" + alpha);
        }

        $("#canvas").mousemove(function (e) {
            handleMouseMove(e);
        });