How to use the electric field calculation and canvas to make a representation of the electric field

This is what I have, there are 3 canvases, the green and blue arrows are the electric field for the charge, I don’t know how to make the third canvas (with opacity 0 in the image) rotate a specific amount of degrees depending on the electric force being exerted on the arrows.

javascript:

    //distance between the canvas and the charges(x and y)
    //x is the green one and y is the blue one
    let distanceX = getDistanceBetweenElements(canvas1, x)/100;
    let distanceY = getDistanceBetweenElements(canvas1, y)/100;
    
    //Electric force
    let f1 = k*((q1*q2)/Math.pow(distanceX,2));
    let f2 = k*((q1*q2)/Math.pow(distanceY,2));

    //Electric field
    let e1 = (k*q1)/Math.pow(distanceX,2);
    let e2 = (k*q2)/Math.pow(distanceY,2);

One of the thing that i have is the rotation angle of the blue and green arrows

    function angle(cx, cy, ex, ey){
        const dy = ey - cy;
        const dx = ex - cx;
        const rad = Math.atan2(dy, dx);
        const deg = rad * 180 / Math.PI;
        return deg;
    }

    //Funcion getPositionAtCenter
    function getPositionAtCenter(element) {
        const {top, left, width, height} = element.getBoundingClientRect();
        return {
            x: left + width / 2,
            y: top + height / 2
        };
    }

    //Funcion getDistanceBetweenElements
    function getDistanceBetweenElements(a, b) {
        const aPosition = getPositionAtCenter(a);
        const bPosition = getPositionAtCenter(b);
        
        return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);  
    }


    let Q1x = getPositionAtCenter(document.getElementById('x')).x;
    let Q1y = getPositionAtCenter(document.getElementById('x')).y;
    let Q2x = getPositionAtCenter(document.getElementById('y')).x;
    let Q2y = getPositionAtCenter(document.getElementById('y')).y;
    
    const rekt = canvas1.getBoundingClientRect();
    const anchorX= rekt.left + rekt.width / 2;
    const anchorY= rekt.top + rekt.height / 2; 
    
    let angleDeg1 = angle(Q1x, Q1y, anchorX, anchorY);
    let angleDeg2 = angle(Q2x, Q2y, anchorX, anchorY);
        
    //rotation angle if the green charge is positive or negative
    let positivo1 = angleDeg1+180; 
    let negativo1 = angleDeg1;

    //rotation angle if the blue charge is positive or negative
    let positivo2 = angleDeg2 + 180;
    let negativo2 = angleDeg2;