JSFiddle - React, Tailwind, and code Playground

by Jonah

HTML

<canvas id = "canv" width = "600" height = "600"></canvas>

CSS

*
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body
{
	width: 100%;
	height: 100%;
}

#canv
{
	width: 600px;
	height: 600px;
}

JavaScript

var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");

var c1 = 
{
	x: 50,
	y: 300,
	r: 10
}

var c2 = 
{
	x: 550,
	y: 300,
	r: 10
}

function draw()
{
	ctx.beginPath();
	ctx.arc(c1.x, c1.y, c1.r, 0, 2 * Math.PI, false);
	ctx.fillStyle = 'red';
	ctx.fill();
	ctx.lineWidth = 2;
	ctx.strokeStyle = '#003300';
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(c2.x, c2.y, c2.r, 0, 2 * Math.PI, false);
	ctx.fillStyle = 'blue';
	ctx.fill();
	ctx.lineWidth = 2;
	ctx.strokeStyle = '#003300';
	ctx.stroke();


	ctx.beginPath();
	ctx.moveTo(c1.x, c1.y);
	ctx.bezierCurveTo(20, 100, 200, 100, c2.x, c2.y);
	ctx.stroke();
}

draw();

var mouseIsDown = false;

canvas.onmousedown = function(e)
{
	mouseIsDown = true;
}

canvas.onmouseup = function(e)
{
	mouseIsDown = false;
}

canvas.onmousemove = function(e)
{
    if(!mouseIsDown) return;

    ctx.clearRect(0, 0, 600, 600);
   
   	c1.x = e.x;
	c1.y = e.y;
	
	draw();
}