JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<canvas id="canvas" height="200" width="200"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mouse = {
	"active": false,
	"start": {
    "x": 0,
    "y": 0
  }
}

var arc = {
	"properties": {
  	"x": 0,
    "y": 0
  }
}

/*if (canvas && context) {
  context.lineWidth = 2;
  context.arc(100, 100, 50, 0, (Math.PI / 180) * 90);
  context.stroke();
  context.closePath();
}*/

canvas.addEventListener('mousedown', function(event) {
	mouse.active = true;
  mouse.start.x = event.clientX;
  mouse.start.y = event.clientY;
});
canvas.addEventListener('mousemove', function(event) {
	if (mouse.active == true) {
  	if (mouse.start.x > event.clientX) {
    	arc.properties.x = Math.abs(mouse.start.x - event.clientX);
    }
    else {
    	arc.properties.x = 0;
    }
    if (mouse.start.y < event.clientY) {
    	arc.properties.y = Math.abs(mouse.start.y - event.clientY);
    }
    else {
    	arc.properties.y = 0;
    }
    
    updateArc();
  }
});
document.addEventListener('mouseup', function() {
	mouse.active = false;
});

function updateArc() {
	context.clearRect(0, 0, canvas.width, canvas.height);
  
  context.beginPath();
  context.lineWidth = 2;
  context.moveTo(mouse.start.x, mouse.start.y);
  context.quadraticCurveTo(arc.properties.x / 2, -mouse.start.y, arc.properties.x, mouse.start.y);
  context.stroke();
  context.closePath();
}


/*
 * Mouse click      -> save click position.     -> mouse.position.start
 * Mouse move       -> save current position.   -> mouse.position.current
 * Move on x axis   -> arc.properties.end.x = mouse.position.start.x + Math.abs(mouse.position.start.x - mouse.position.current.x);
 * Move on y axis   ->
 * Move on y axis   -> arc.properties.end.y = mouse.position.start.y + Math.abs(mouse.position.start.y - mouse.position.current.y);
 * arcTo(mouse.position.start.x, mouse.position.start.y, arc.properties.end.x, arc.properties.start.y, radius);
 */