JSFiddle - React, Tailwind, and code Playground

Jcanvas form

by Christopher O

HTML

<script src="https://rawgit.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<script src="https://www.staffordloansolutions.com/public/jcanvas-handles.min.js"></script>
<!-- canvas width="700" height="300"></canvas -->
<span id="status">&#160;</span><br />

Page 1:<br />
<canvas class="page" id="p1" width="700" height="300"></canvas><br />
<input type="button" id="addsquare" value="Draw Rect" />
<input type="button" id="addinitial" value="Add Initial" />
<input type="button" id="update" value="Update History" />
<br /><br />

Mirror 1:<br />
<!-- canvas class="page" id="mrp1" width="700" height="300"></canvas><br / --><br />

History (v. 1):<br />
<div id="history"></div>

CSS

.xcanvas { border: 1px solid #ccc;}

.inuse { color: #00f;}

.page, .mirror {
	margin: 0px;
	padding: 0px;
	border: 1px solid #ccc !important;
  color: #fff;
  background-color: #FFF;
  background-repeat: no-repeat;
}
#p1, #mrp1 {
	background-image: url(http://www.homeandlearn.co.uk/MW//images/Form.jpg);
}

JavaScript

// http://projects.calebevans.me/jcanvas/docs/introduction/

// update position in status
$(".page").mousemove(function(e){
   var parentOffset = $(this).offset();  // $(this).parent().offset();
   var relX = e.pageX - Math.round(parentOffset.left);
   var relY = e.pageY - Math.round(parentOffset.top);
   $('#status').html('x:' + relX + ', y: '+ relY + ', Docx:' + e.pageX + ', Docy: '+ e.pageY);
});

//-------------------------------------------------
// Cache canvas element
//var $canvas = $('#p1');
var canvas, pageid, context, startX, endX, startY, endY, final;
var mouseIsDown = 0;
var cnt = 0;

function init(canvasid) {
    pageid = canvasid; // update global pageid var
    canvas = document.getElementById(canvasid);
    context = canvas.getContext("2d");

    canvas.addEventListener("mousedown", mouseDown, false);
    canvas.addEventListener("mousemove", mouseXY, false);
    canvas.addEventListener("mouseup", mouseUp, false);
}

// This is where the magick hapens
function mouseUp(eve) {
	   if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        var pos = getMousePos(canvas, eve);
        endX = pos.x;
        endY = pos.y;
        //drawTempSquare(); //update on mouse-up
        // Clear dotted selection and stop listening
        context.clearRect(0, 0, canvas.width, canvas.height);
        canvas.removeEventListener("mousedown", mouseDown, false);
        canvas.removeEventListener("mousemove", mouseXY, false);
        canvas.removeEventListener("mouseup", mouseUp, false);
    }
    
    cnt++;
    $('#history').append(cnt + '. (' + pageid + '-' + cnt + ')  x:' + startX + ', y:' + startY + ', w:' + (endX - startX) + ', h:' + (endY - startY) + '<br>');
    
    // Create our final dragable rectangle w/jcanvas + handles plugin to make resizeable
    drawSquare('txt');
}

function mouseDown(eve) {
    mouseIsDown = 1;
    var pos = getMousePos(canvas, eve);
    startX = endX = pos.x;
    startY = endY = pos.y;
    drawTempSquare(); //update
}

function...