JSFiddle - React, Tailwind, and code Playground

by lannymcnie

HTML

<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
CreateJS draw/erase example by Grant Skinner,
<a href="http://gskinner.com/">gskinner.com</a>
<canvas id="test" width="500" height="300"></canvas><br>

<input type="radio" name="action" value="draw" checked> draw
<input type="radio" name="action" value="erase" id="erase"> erase

CSS

body { font-family: Arial, sans-serif; }
canvas { border: solid 2px black; background: #eee; }

JavaScript

var c = createjs, stage, art;
var x, y, listener, color, hue=0;

stage = new c.Stage("test");
var testImg = new c.Bitmap("http://lorempixel.com/output/animals-q-c-640-480-5.jpg");


// Once the image is loaded, update the cache one time, 
// then remove the image so it no longer is applied when you call updateCache
testImg.image.onload = function() {
    cont.updateCache("source-over");
	cont.removeChild(testImg);
    
    stage.update();    
}

var cont = stage.addChild(new c.Container());
art = new c.Shape()
cont.cache(0,0,600,400);
cont.addChild(testImg, art);

stage.on("stagemousedown", startDraw, this);

function startDraw(evt) {
    listener = stage.on("stagemousemove", draw, this);
    stage.on("stagemouseup", endDraw, this);
    color = c.Graphics.getHSL(hue+=85, 50, 50);
    x = evt.stageX-0.001; // offset so we draw an initial dot
    y = evt.stageY-0.001;
    draw(evt); // draw the initial dot
}

function draw(evt) {
    art.graphics.ss(20,1).s(color).mt(x,y).lt(evt.stageX, evt.stageY);
    
    // the composite operation is the secret sauce.
    // we'll either draw or erase what the user drew.
    cont.updateCache(erase.checked ? "destination-out" : "source-over");
    
    art.graphics.clear();
    x = evt.stageX;
    y = evt.stageY;
    stage.update();
}

function endDraw(evt) {
    stage.off("stagemousemove", listener);
    evt.remove();
}