Update

projects/projectile/index.js

@@ -55,9 +55,9 @@ let projectile= function (p){
         draw_arrow(p,x0,height-y0,x0+v0,height-(y0+v0),v0t,c,skiparrow)
 
         p.stroke(121, 199, 107)
-        draw_arrow(p,50,50,50,0,vj,c,skiparrow,true)
+        draw_arrow(p,x0,height-y0,x0,height-y0-50,vj,c,skiparrow,true)
         p.stroke(199,119,107)
-        draw_arrow(p,50,50,100,50,vi,c,skiparrow)
+        draw_arrow(p,x0,height-y0,x0+50,height-y0,vi,c,skiparrow)
 
         p.pop()
     }

public/js/p5_custom.js

@@ -41,7 +41,14 @@ draw_arrow=function(p,x1,y1,x2,y2,elt=null,canvas,skiparrow=false,flip=false){
         }
 
         cp=canvas.position()
-        elt.position(cp.x+center.x+justify*xfactor-5,cp.y+center.y-justify*yfactor-elt.elt.offsetHeight/2)
+        elt_x=cp.x+center.x+justify*xfactor-5
+        elt_y=cp.y+center.y-justify*yfactor-elt.elt.offsetHeight/2
+        if (elt_x<cp.x ||  elt_y < cp.y || elt_x>(canvas.width+cp.x) || elt_y>(canvas.height+cp.y)){
+            elt.elt.style.display="none"
+        } else {
+            elt.elt.style.display="block"
+        }
+        elt.position(elt_x,elt_y)
 
         
     }

template.html

@@ -47,7 +47,9 @@
     <br />
     <div class="row">
       <div class="col" style="padding:0px;">
-        <div id="canvas" style="margin-bottom:2em" align="center"></div>
+        <center>
+          <div id="canvas" class="img-thumbnail" style="margin-bottom:2em;width:fit-content;height:fit-content;"></div>
+        </center>
       </div>
     </div>
     <div class="row">