JSFiddle - React, Tailwind, and code Playground

by Eli Marudi

HTML

<div class = "test">
<canvas id="c" ></canvas>
</div>

CSS

canvas { 
z-index: 1;
 border: 3px solid #ccc;
cursor: url("https://s18.postimg.org/lkkcmhrw9/pbrush_cursor_v3.png"), auto;

}

.test {
  z-index: 2333;
  background-image: url("https://s15.postimg.org/hvg09d4m3/image.png");
  background-size:cover;
  width: 100vw;
  height: 100vh;
}

JavaScript

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 30;
ctx.lineJoin = ctx.lineCap = 'butt';

var isDrawing, lastPoint;

el.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmouseover = function(e) {
  isDrawing = true;
  lastPoint = { x: e.clientX, y: e.clientY };
};


el.onmousemove = function(e) {
  if (!isDrawing) return;

  ctx.beginPath();
  ctx.moveTo(lastPoint.x, lastPoint.y);
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  
  ctx.moveTo(lastPoint.x - 3, lastPoint.y - 3);
  ctx.lineTo(e.clientX - 3, e.clientY - 3);
  ctx.stroke();
  
  lastPoint = { x: e.clientX, y: e.clientY };
};

el.onmouseup = function() {
  isDrawing = false;
};

var c = document.getElementById("c");
var ctx = c.getContext("2d");



var background = new Image();
background.src = "https://s14.postimg.org/gza24raht/image.jpg";

background.onload = function(){
    ctx.drawImage(background,0,0);   
}