JSFiddle - React, Tailwind, and code Playground

HTML

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>

<button type='button' id='pencil'>Pencil</button>
<button type='button' id='eraser'>Eraser</button>
<canvas id='canvas' width='500' height='500' style='border: 1px solid #000'></canvas>

JavaScript

$(document).ready(function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    var bMouseDown = false;
	var strokeStyle = "#FF0000";
    
    
    $("#pencil").click(function() {
		strokeStyle = "#FF0000";
	});
	
	$("#eraser").click(function() {
		strokeStyle = "#FFFFFF";
	});
	
    $("#canvas").mousedown(function() {
        bMouseDown = true;
    });
    
    $("#canvas").mouseup(function() {
        bMouseDown = false;  
    });
    
    $("#canvas").mousemove(function(e) {
        if (bMouseDown) {
			context.strokeStyle = strokeStyle;
            context.lineWidth = 5;
            context.beginPath();
            context.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            context.lineTo(e.pageX ,e.pageY);
            context.stroke();
        }  
    });
});