JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

Кликни 4 раза по канве в разных местах

CSS

canvas{
  outline:1px solid red;
}

JavaScript

var canvas,ctx,ctxW = 500,ctxH = 500;
var p0 ,p1,p2,p3;
var check = 0;
window.onload = function(){
	canvas = document.createElement("canvas");
  canvas.width = ctxW;
  canvas.height = ctxH;
  document.body.appendChild(canvas);
  ctx = canvas.getContext("2d");
  canvas.onmousedown = function(e){
		var x = e.clientX- canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;
  	switch(check++){
    	case 0:
       p0 = new Vector(x,y);
       break;
       case 1:
       p1 = new Vector(x,y);
       break;
       case 2:
       p2 = new Vector(x,y);
       break;
       case 3:
       p3 = new Vector(x,y);
       break;
       default:
       check = 1;
       p0 = new Vector(x,y);
       break;
    }
    
  draw();
	}
}
function Vector(x,y){
	return {x:x,y:y};
}

function draw(){
ctx.clearRect(0,0,ctxW,ctxH)
     
	if(check == 4){
  	ctx.beginPath();
  	ctx.strokeStyle= "#F00";
  for(var t = 0; t < 1; t+= 0.01){
    var point = calculateBezierPoint(t,p0,p1,p2,p3);
    //ctx.fillRect(point.x,point.y,10,10);
    if(t==0)
    	ctx.moveTo(point.x,point.y);
      else
      ctx.lineTo(point.x,point.y);
      ctx.stroke();
  }
    ctx.closePath();
  }
  
  	switch(check){
    	case 1:
      	ctx.fillStyle = "#0F0";
      	ctx.fillRect(p0.x-2.5,p0.y-2.5,5,5);
        break;
        case 2:
        ctx.strokeStyle = "#00F";
  			ctx.beginPath();
        ctx.moveTo(p0.x,p0.y);
        ctx.lineTo(p1.x,p1.y)
        ctx.stroke();
  			ctx.closePath();        
        ctx.fillStyle = "#0F0";
      	ctx.fillRect(p0.x-5,p0.y-5,10,10);
        ctx.fillRect(p1.x-5,p1.y-5,10,10);
        break;
        
        case 3:
        ctx.strokeStyle = "#00F";
  			ctx.beginPath();
        ctx.moveTo(p0.x,p0.y);
        ctx.lineTo(p1.x,p1.y)
        ctx.stroke();
  			ctx.closePath();        
        ctx.fillStyle = "#0F0";
      	ctx.fillRect(p0.x-5,p0.y-5,10,10);
        ctx.fillRect(p1.x-5,p1.y-5,10,10);
        
      	ctx.fillStyle = "#0F0";
     ...