JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="test" width="500" height="500"></canvas>
<p>先用鼠标在黑板上随意图画一个图形，然后点击click，然后鼠标移动到黑板上通过散落的小球拼出刚才图形，完成之后在clear重新来过</p>
    <button id="ok">click</button>
    <button id="clear">clear</button>

CSS

canvas {
            background-color: #000;
        }

JavaScript

//h=（1/2）gt^2
        var open;
        document.getElementById('ok').onclick = function(){
            open = true;
            arr = [];
            ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
        };
        document.getElementById('clear').onclick = function(){
            open = false;
            arr = drawArr = [];
            ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
        };
        var canvas = document.getElementById('test');
        var ctx = canvas.getContext('2d');
        var g = 0.1;
        var h = 60;
        var w = 60;
        var vx = 1;
        var vy = -2;
        var time = 0;
        var r = 8;
        var arr = [];//JSON.parse(localStorage.getItem('xxxx'));
        const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
        var date = Date.now();
        var flag;
        var drawArr = [];
        document.getElementById('test').addEventListener('mousedown', function(e){
            
            flag = true;
        });
        document.getElementById('test').addEventListener('mouseup', function(e){
            
            flag = false;
        });
        document.getElementById('test').addEventListener('mousemove', function(event){
            if (!open) {
                if (!flag) return;
                
                var rect = event.currentTarget.getBoundingClientRect();
                var gravityPoint = {
                    x: event.clientX - rect.left,
                    y: event.clientY - rect.top
                  };
                  circle(gravityPoint.x,gravityPoint.y,r,'#fff');
                  drawArr.push({
                    w:gravityPoint.x,
                    h:gravityPoint.y,
                    vx:0,
                    vy:0,
                    g:0,
                    color:'#fff'
                  });
                  //localStorage.setItem('xxxx',JSON.stringify(drawArr));
              } else {
            ...