title: javascript - how to draw only inside a canvas border
body: <p>i have a canvas and want to draw a rectangle using 4 inputs and drawing it with the 4 numbers but I also need to make sure to validate that the rectangle are
  only drawn inside the canvas borders appreciate any help with validation (already have the canvas ready with the inputs ), I'm new to coding so excuse any syntax mistakes</p>
  <pre><code>   &lt;script&gt;  
  
    var dig = 0 
    var c;   
    var ctx;
     var cal;    
     var cal2;
     var cal3;
     var cal4;
     
     function GetVal(){
  
          cal = Number(document.getElementById(&quot;input1&quot;).value) ;
          cal2 = Number(  document.getElementById(&quot;input1&quot;).value);
          cal3=  Number( document.getElementById(&quot;input3&quot;).value);
          cal4 =  Number( document.getElementById(&quot;input4&quot;).value);
     }
  
    //DrawCanvas
   function DrawCanvas(){
   
  c = document.getElementById(&quot;myCanvas&quot;);//all this need to be inside a function with the parametres
  ctx = c.getContext(&quot;2d&quot;);
  ctx.beginPath();
  ctx.rect(cal, cal4, cal3, cal2);
  ctx.stroke();
  }
  
    function ClearCanvas(){
      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
   }
  
     &lt;/script&gt;
  </code></pre>