JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="tut0" width="125" height="125"></canvas>

CSS

canvas{position:absolute;}

JavaScript

var blue = "rgb(0,0,255)";
var red = "rgb(255,0,0)";


var compositeTypes = [
    'source-in'];

function draw() {
    for (i = 0; i < compositeTypes.length; i++) {

        var ctx = document.getElementById('tut' + i).getContext('2d');
        ctx.globalAlpha = 0.5;
        // draw rectangle
        ctx.fillStyle = blue;
        ctx.fillRect(15, 15, 70, 70);

        // set composite property
        ctx.globalCompositeOperation = compositeTypes[i];

        // draw circle
        ctx.fillStyle = red;
        ctx.beginPath();
        ctx.arc(75, 75, 35, 0, Math.PI * 2, true);
        ctx.fill();

    }
}

var canvas =  document.getElementById('tut0'),
    ctx = canvas.getContext("2d");

canvas.onclick = function (e) {
    var x = e.pageX ;
    var y = e.pageY;
    var imgData = ctx.getImageData(x, y, 1, 1).data;
        console.log(imgData[3]);
}

draw();