JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="board">
<div class="board-header">
  <div class="blue-arrow"><span> > </span> 
  MY ADVANTAGE IS
  </div>
</div>
<div id="canvas"></div>
</div>

 <ul class="controls">
        <li><input type="button" id="clear" value="Clear"></li>
        <li><input type="color" id="color" value="#000000"></li>
        <li><input type="range" id="size" min="1" max="50" value="8"><span id="sizeIndicator">8</span></li>
    </ul>

CSS

Html{
  /*background: URL('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/ 
}
.board{
    display: block;
    border: 1px solid #e2e2e2;
    width: 530px;
    padding: 10px;
    margin: 0 auto;
    margin-top: 10%;
    background-color:#f3f3f3;
}
#canvas {
    /* background-color:#ffffff; */
    width: 530px;
    height: 450px;
    border: 1px solid #e2e2e2;
}
#canvas:hover{
  cursor:crosshair;
}
.blue-arrow{
  color:blue;
}
.board-header{
  display: inline-block;
  background-color: #ffffff;
  line-height: 30px;
  font-family: century gothic;
  text-align: center;
  border-bottom: 1px solid #999;
  width: 100%;
  border-right: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
  border-top: 1px solid #e2e2e2;
}

JavaScript

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || '#ff6600');
        //ctx.fillStyle(fillColor = '#ff6600');

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 1; // or whatever
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 530, 450, '#999');

})();