如何只在画布边框内绘制

Question

我有一个画布，想用4个输入绘制一个矩形，并用4个数字绘制，但我也需要确保验证矩形是否只在画布边界内绘制感谢任何验证帮助(已经准备好了画布的输入(，我是编码新手，所以请原谅的任何语法错误

<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" />