JSFiddle - React, Tailwind, and code Playground

by otorineko6790

HTML

<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<button type='button' id='pencil'>Pencil</button>
<button type='button' id='eraser'>Eraser</button>
<img src="http://upload.wikimedia.org/wikipedia/commons/4/41/Badger%28UO%29.jpg">
<canvas id='canvas' width='500' height='500' style='border: 1px solid #000'></canvas>

CSS

#canvas {
  position: absolute;
  left: 0px;
}

JavaScript

$(document).ready(function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  var bMouseDown = false;
  var strokeStyle = "#FF0000";
  var bErasing = false;

  $("#pencil").click(function() {
    strokeStyle = "#FF0000";
    bErasing = false;
  });

  $("#eraser").click(function() {
    //		strokeStyle = "#FFFFFF";
    bErasing = true;
  });

  $("#canvas").mousedown(function() {
    bMouseDown = true;
  });

  $("#canvas").mouseup(function() {
    bMouseDown = false;
  });

  $("#canvas").mousemove(function(e) {
    if (bMouseDown) {
      context.strokeStyle = strokeStyle;
      context.lineWidth = 5;
      context.beginPath();
      if (bErasing == true) {
        context.globalCompositeOperation = "destination-out";
      } else {
        context.globalCompositeOperation = "source-over";
      }
      context.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
      context.lineTo(e.pageX, e.pageY);
      context.stroke();



    }
  });
});