JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="openPopup();">drawing</button>
<div id="test" class="popup" >
<canvas id="canvas1" width="790" height="1110" style=" border:solid #00F"> </canvas>
<p>&nbsp;</p>
</div>

CSS

#canvas1 {
    left:0;  /* adjust as needed */
    top:0;
    position: inline;
    width: 100%;
    height: 100%;
}
.popup{
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    width: 764px;
    height: 1120px;
    font-family:verdana;
    font-size:13px;
    background-color:rgba(255, 255, 255, 0);
    border:2px solid green; 
    z-index:100000000000000000;
    display:none; 
    opacity:0.6; 
    filter:alpha(opacity=60);
    margin-left: 400px; 
    margin-top: 100px;
}
.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-image:url(/images/icon-cross.png);
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}
.cancel:hover{
    background-color:#09F;
}

JavaScript

function openPopup() {   
    var p = document.getElementById('test');
    p.style.display = 'block';

    canvas.width  = parseInt(p.style.width, '10'); //only when you use pixels
    canvas.height = parseInt(p.style.height, '10');
}

function closePopup() {
    document.getElementById('test').style.display = 'none';
}

    function foo() {
        //alert("Submit button clicked!");
        //return true;
		var canvas = document.getElementById("canvas1");
		var dataURL = canvas.toDataURL("image/png");
        dataURL = dataURL.replace(/^data:image\/(png|jpeg);base64,/, "");    
    var req = $.ajax({
        url: "Canvases",
        type: "Post",
        data: "operation=0&sessionId=" + readCookie('sessionId') + "&title=" + document.getElementById('imageNameTextbox').value + "&pic=" + dataURL,
        success: function(){
        }
    });
    }

function choosecolor(cps) {
    ctx.strokeStyle = cps; // red
}

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var isPressed = false;
var mx = 4, my = 4;
//http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing
function clear_canvas_width ()
{
    var s = document.getElementById ("canvas1");
    var w = s.width;
    s.width = 4;
    s.width = w;
	ctx.clear();
}

	
function move(e) {
  getMouse(e);
  if (isPressed) {
    ctx.lineTo(mx, my);
    ctx.stroke()
  }
}

function up(e) {
  getMouse(e);
  isPressed = false;
}

function down(e) {
  getMouse(e);
  ctx.beginPath();
  ctx.moveTo(mx, my);
  isPressed = true;
}

can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;

// waaaay oversimplified:


function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX - 400;
    my = e.pageY - 108;
}



		/*For touch screen*/ 
		window.addEventListener('load',function(){
		// get the canvas element and its context
		var canvas = document.getElementById('canvas1');
		var context = canvas.getContext('2d');
		
		// create a drawer which...