javascript - 如何仅在 canvas 边框内绘制

Question

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

   <script>  

  var dig = 0 
  var c;   
  var ctx;
   var cal;    
   var cal2;
   var cal3;
   var cal4;
   
   function GetVal(){

        cal = Number(document.getElementById("input1").value) ;
        cal2 = Number(  document.getElementById("input1").value);
        cal3=  Number( document.getElementById("input3").value);
        cal4 =  Number( document.getElementById("input4").value);
   }

  //DrawCanvas
 function DrawCanvas(){
 
c = document.getElementById("myCanvas");//all this need to be inside a function with the parametres
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(cal, cal4, cal3, cal2);
ctx.stroke();
}

  function ClearCanvas(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
 }

   </script>

Answer 1

 const inputs = [1,2,3,4].map(i => document.getElementById(`input${i}`)); inputs.forEach(input => input.oninput = DrawCanvas); const canvas = document.getElementById("myCanvas"); canvas.width = 600; canvas.height= 200; const ctx = canvas.getContext('2d'); function validateParams(topX, topY, width, height){ const isBetween = (val, min, max) => val > 0 && val < max; return isBetween(topX, 0, canvas.width) && isBetween(topY, 0, canvas.height) && isBetween(topX + width, 0, canvas.width) && isBetween(topY + height, 0, canvas.height) } function GetVal(){ return inputs.map(input => +input.value); } function DrawCanvas(){ ClearCanvas(); const coords = GetVal(); if(validateParams(...coords)) { ctx.beginPath(); ctx.rect(...coords); ctx.stroke(); ctx.closePath(); } else { ctx.fillText('Invalid params', 10, 10); } } function ClearCanvas(){ ctx.clearRect(0, 0, canvas.width, canvas.height); } DrawCanvas();

 <input id="input1" type="number" step="1" value="200"/> <input id="input2" type="number" step="1" value="10"/> <input id="input3" type="number" step="1" value="-100"/> <input id="input4" type="number" step="1" value="100"/> <canvas id="myCanvas" />