var c = createjs; var stage, art, container; var x, y, listener, color, hue=0; stage = new c.Stage("test"); art = stage.addChild(new c.Shape()); art.cache(0,0,600,400); stage.on("stagemousedown", startDraw, this); function startDraw(evt) { listener = stage.on("stagemousemove", draw, this); stage.on("stagemouseup", endDraw, this); x = evt.stageX; y = evt.stageY; color = c.Graphics.getHSL(hue+=85, 50, 50); } 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. art.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(); }
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
body { font-family: Arial, sans-serif; } canvas { border: solid 2px black; background: #eee; }