JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="600" height="400"></canvas>
    <form>
        degree<input name="deg" value="135"/><input type="submit" value="go"/>
    </form>

CSS

canvas{
            width:600px;
            height:400px;
            background:#eeeeee;
        }

JavaScript

let add=(a,b)=>[b[0]+a[0], b[1]+a[1]];
        let canvas = document.querySelector('canvas');
        let width = canvas.width;
        let height = canvas.height;
        let c = canvas.getContext('2d');
        c.transform(1,0,0,-1,0,400);
        let P_1 = [300,200];
        let O = [40,40];

        function plotAxis(){
            c.beginPath();
            c.moveTo(...add(O,[-10,0]));
            c.lineTo(...add(O, [width-100,0]));
            c.moveTo(...add(O,[0,-10]));
            c.lineTo(...add(O, [0,height-100]));
            c.closePath();
            c.stroke();
        }
        function plotPoint(p, color){
            let center = add(O,p);
            c.beginPath();
            c.moveTo(...add(center, [-5,-5]));
            c.lineTo(...add(center, [+5,+5]));
            c.moveTo(...add(center, [-5,+5]));
            c.lineTo(...add(center, [+5,-5]));
            c.closePath();
            c.strokeStyle = color || 'black';
            c.stroke();
            c.strokeStyle = 'black';

            c.setTransform (1, 0, 0, 1, 0, 0);
            c.fillStyle = 'black';
            c.fillText(`(${(p[0]/100).toFixed(2)},${(p[1]/100).toFixed(2)})`, center[0]+10, height-center[1])
            c.transform(1,0,0,-1,0,400);//brr
        }

        function plotV(v){
            let or = add(add(O,P_1), v.map(x=>x*200))
            let end = add(add(O,P_1), v.map(x=>x*-200))
            c.beginPath()
            c.moveTo(...or)
            c.lineTo(...end)
            c.stroke();
            c.closePath();
        }
        function plotVec(A,I){
            c.beginPath()
            c.moveTo(...add(O, A))
            c.lineTo(...add(O,I))
            c.stroke();
            c.closePath();
        }
        function onAngleChange(a){
            c.fillStyle='#eeeeee';
            c.fillRect(0,0, width, height);

            let A = a/180*Math.PI;
            let v = [Math.cos(A), Math.sin(A)];
            let v2 = [-Math.sin(A), Math.cos(A)]


           ...