JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding:10px; width:960px; border:1px solid #000;">
    
    <div style="width:960px; height:540px; display:inline-block;">
        <video id="video" src="http://www.ntropic.com/media/movies/329_work_SXBX3900000H-NIM_phpgYJzzG1370901819.mp4" width="960" height="540" ></video>
    </div>
    <canvas id="canvas" width="960" height="540" style="position:absolute; top:40px; left:9px; z-index:100;"></canvas>    
    <div style="width:958px; border:1px solid #000; display:inline-block; background-color:#222;">
        <div id="video-controls" >
            <div style="padding:6px 8px 4px 4px; float:left;"><button type="button" id="play-pause" class="k-button" style="width:52px">
                Play
            	</button>
            </div>
            
        </div>
        
        <div style="float:right; padding:4px;">
            
            <input type="button" value="save" id="btn" size="30" onclick="save()" style="float:left; padding:4px; margin-right:4px;" />
            
        </div>
	</div>
</div>

<div id="saved" style="border:1px solid #000; position:absolute; top:626px; left:10px; bottom:40px; width:958px; overflow:auto;">SAVED:</div>

    <div id="snaps"></div>

CSS

.color{
		float:left;
		margin-top:2px;
		margin-right:4px;
		width:24px;
		height:24px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
	}

JavaScript

var canvas, ctx, flag = false,
		w = 960,
		h = 540,
		prevX = 0,
		currX = 0,
		prevY = 0,
		currY = 0,
		dot_flag = false;
	
	var x = "black",
		y = 2;


$(document).ready(function () {
    
    canvas = document.getElementById('canvas');
		ctx = canvas.getContext("2d");
		w = canvas.width;
		h = canvas.height;
	
		canvas.addEventListener("mousemove", function (e) {
			findxy('move', e)
		}, false);
		canvas.addEventListener("mousedown", function (e) {
			findxy('down', e);
			//console.log('down');
		}, false);
		canvas.addEventListener("mouseup", function (e) {
			findxy('up', e);
			//console.log('up');
		}, false);
		canvas.addEventListener("mouseout", function (e) {
			findxy('out', e)
		}, false);
    
    
    var video = document.getElementById("video");
		
		// Buttons
	var playButton = document.getElementById("play-pause");
		
		
		// Event listener for the play/pause button
		playButton.addEventListener("click", function() {
		  if (video.paused == true) {
			// Play the video
			video.play();
			ctx.clearRect(0, 0, w, h);
			// Update the button text to 'Pause'
			playButton.innerHTML = "Pause";
		  } else {
			// Pause the video
			video.pause();
			// Update the button text to 'Play'
			playButton.innerHTML = "Play";
		  }
		});
    
})
        
    function draw() {
		ctx.beginPath();
		ctx.moveTo(prevX, prevY);
		ctx.lineTo(currX, currY);
		ctx.strokeStyle = "green";
		ctx.lineWidth = y;
		ctx.stroke();
		ctx.closePath();
	}
    
    function save() {
		
        console.log("save");
		//COMP CANVAS OVER VIDEOFRAME
		var video = document.getElementById("video");
		
		var compCanvas = document.createElement('canvas');
		compCanvas.width = video.width;
		compCanvas.height = video.height;
		compContext = compCanvas.getContext('2d');
		compContext.drawImage(video, 0, 0);
		compContext.drawImage(canvas, 0, 0);

        snaps.appendChild(compCanvas);
        /*var dataURL = compCanvas.toDataURL();

		$("#saved").append('<div style="width:954px;...