JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<section id="elem"></section>

CSS

#elem {
  width: 200px;
  height: 200px;
}

JavaScript

/*! wScratchPad - v2.1.0 - 2014-04-14 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('<img src=""/>').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){return this.enabled?(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,void this._scratchFunc(b,"Down")):!0},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,void this.reset()):(this.$el.append("Canvas is not supported in this browser."),!0)},reset:function(){var b=this,c=Math.ceil(this.$el.innerWidth()),d=Math.ceil(this.$el.innerHeight()),e=window.devicePixelRatio||1;this.pixels=c*d,this.$scratchpad.attr("width",c).attr("height",d),this.canvas.setAttribute("width",c*e),this.canvas.setAttribute("height",d*e),this.ctx.scale(e,e),this.pixels=c*e*d*e,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,c,d),this.ctx.fill(),this.$img.show()):a(new...