JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<header role="banner">
    	<h1>Cansparant</h1>
</header>
<div id="buttons"></div>
<div role="main">
    <section id="main-content">
        <canvas id="transp-canvas">I am canvas</canvas>
    </section>
</div>

CSS

canvas {
		cursor: pointer;
		background-color: white;
		background-image: -moz-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%), -moz-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%);
		background-image: -webkit-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%), -webkit-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%);
		background-image: -o-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%), -o-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%);
		background-image: -ms-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%), -ms-linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%);
		background-image: linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%), linear-gradient(45deg, #eee 25.0%, transparent 25.0%, transparent 75.0%, #eee 75.0%);
		background-size: 30px 30px;
		background-position: 0 0, 15px 15px;
	}
	h1 {
		font-size: 64px;
		line-height: 1.1em;
		margin-bottom: 20px;
		font-family: 'Ewert';
		font-style: normal;
		font-weight: 400;
		text-shadow: 1px 1px 1px #ebaa56;
	}
	h3 {
		font-size: 36px;
		line-height: 1.1em;
		font-family: 'Smokum';
	}
	
	#back-off {
		border: 3px dashed #ebaa56;
		width: 50%;
		margin: 20px auto;
		padding: 20px;
		border-radius: 15px;
	}
	body {
		text-align: center;
		font: bold 1em 'Open Sans';
		color: #fff;
		background: #43677d url('pattern.png') repeat left top;
	}
	.columns{
		display:table-cell;
		width:300px;
		padding: 20px;
		text-shadow: rgba(0,0,0,0.4) -1px -1px 0;
	}
	#content{
		text-align:justify;
		width:960px;
		margin: 0px auto;
	}

JavaScript

(function () {
    var canvas = document.getElementById("transp-canvas"),
        context = canvas.getContext("2d"),
        img = document.createElement("img"),
        mouseDown = false,
        brushColor = "rgb(0, 0, 0)",
        hasText = true,
        clearCanvas = function () {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.font = 'italic 25px Calibri';
          context.textAlign = 'center';
          context.fillStyle = '#bbb';
          context.fillText("Drop an image onto the canvas", canvas.width/2, canvas.height*3/4);
          context.fillText("Click a spot to select the color to be transparent", canvas.width/2, canvas.height*4/5);
        };
  context.canvas.width  = window.innerWidth;
  context.canvas.height = window.innerHeight;
 img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAGQAgMAAABpG7XoAAAABGdBTUEAALGPC/xhBQAAAAxQTFRF/Jg42CgA////iHAA2W6FYwAAAU1JREFUeNrt3LFNw0AUBuCDiIaGKkswBSNQEApGYAmmQQJTMEKYhyoDAI7EIeWE83J3ERX+/s5n39c+2ff80vvwO8+rwxmCvKThz6yBxWKxWKx/aT2ujssti8VisVisJut1nOQt7bLIS/nislK3WSwWi8Vildb6+6nNdEuKrDKnLBaLxWKx+q1p3f5JeIPFYrFYLFbFyvlIQRZjkK89dZvFYrFYLFbUZ/WU2nNe6dlisVgsFosVnv3mFqqHaZVu62lmsVgsFosVvSOH1mde6nnfZrFYLBaLFX1jHsO/hcIdLBaLxWKx9lhlLsrynJeWBXKTl8qCvgm/VLNYLBaLxYpy0jQL46rpbJjFYrFYLFaZs+7pU9csFovFYrEqVmXe4/3hoct3PbOVWSwWi8WasbXuaF0+omeLxWKxWKwZW2HXVIdV7dlisVgsFmu+1hZ+ScFmRJGAiAAAAABJRU5ErkJggg==";

    // Image for loading	
    img.addEventListener("load", function () {
        clearCanvas(); 
        context.canvas.width=img.width;
 context.canvas.height=img.height
        context.drawImage(img, 0, 0);
       ;
    }, false);



    // Detect mouseup
    canvas.addEventListener("mouseup", function (evt) {
        mouseDown = false;
        var colors = context.getImageData(evt.layerX, evt.layerY, 1, 1).data;
        brushColor = "rgb(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ")";
    }, false);

    // Draw, if mouse button is pressed
    /*...