JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="draggable"></canvas>

CSS

body{
    width: 100%;
    height: 100%;
    padding:0;
    margin: 0;
}

JavaScript

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 125, 125);
ctx.stroke();
var dragNorth = false
var dragWest = false
var dragSouth = false
var dragEast = false

c.addEventListener('mousedown',function(e){
    
    if(e.clientY > 15 && e.clientY < 25)
        dragNorth = true
    else
        dragNorth = false
    if(e.clientX > 15 && e.clientX < 25)
        dragWest = true
    else
        dragWest = false
    if(e.clientX > 165 && e.clientX < 175)
        dragEast = true
    else
        dragEast = false
    if(e.clientY > 165 && e.clientY < 175)
        dragSouth = true
    else
        dragSouth = false

})
c.addEventListener('mousemove', function(e){
	if(dragNorth)
        ctx.rect(20, e.clientY, 125, 125);
		ctx.stroke();
        
})