The concept is clearer in this image
In the photo provided, I utilized canvas for drawing; however, I am interested in exploring a different approach that would allow me to create draggable rectangles with unique IDs. For instance, if I were to use div instead of canvas, manual drawing of rectangles like in the photo would not be possible. There may be a solution that I'm unaware of. Upon researching this topic, I found that most people utilize tools like paper.js, but I find them limited to resizing or drag and drop actions which is why I chose not to use them.
function lettersOnly(input) {
var regex = /[^a-z]/gi;
input.value = input.value.replace(regex, "");
}
jQuery(document).ready(function($) {
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasOffset = $("#canvas").offset();
var canvasx = canvasOffset.left;
var canvasy = canvasOffset.top;
var last_mousex = 0;
var last_mousey = 0;
var mousex = 0;
var mousey = 0;
var mousedown = false;
var shapes = [];
var width;
var height;
// make var col a global variable
var col = "black";
var ad = "";
//Mousedown
$(canvas).on('mousedown', function(e) {
last_mousex = parseInt(e.clientX - canvasx);
last_mousey = parseInt(e.clientY - canvasy);
mousedown = true;
});
//Mouseup
$(canvas).on('mouseup', function(e) {
const lastPos = {
lastMouseX: last_mousex,
lastMouseY: last_mousey,
rectWidth: width,
rectHeight: height,
color: col,
name: ad
};
shapes.push(lastPos);
mousedown = false;
});
//Mousemove
$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
width = mousex - last_mousex;
height = mousey - last_mousey;
col = $("#color").val();
ad = $("#name").val();
if (shapes.length > 0) {
for (var i in shapes) {
ctx.beginPath();
ctx.strokeStyle = shapes[i].color;
ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
ctx.fillText(shapes[i].name, shapes[i].rectWidth - shapes[i].lastMouseX, shapes[i].rectHeight - shapes[i].lastMouseY);
ctx.stroke();
}
}
ctx.beginPath();
ctx.rect(last_mousex, last_mousey, width, height);
ctx.strokeStyle = col;
ctx.lineWidth = 3;
ctx.fillText(ad, 100, 100);
ctx.stroke();
}
$('#output').html('Current Coordinate: ' + mousex + ', ' + mousey + '<br/>Last Coordinate: ' + last_mousex + ', ' + last_mousey);
});
});.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#color {
border: 1px solid black;
font-family: 'Times New Roman', Times, serif;
font-size: 14px;
margin: auto;
padding: 0;
position: absolute;
top: 0;
left: 45%;
right: 0;
text-align: center;
}
...