RISOLTO, posto il codice.
<canvas id="canvas" width="500" height="400" style="background-color: yellow"></canvas>
<script>
Canvas=document.getElementById("canvas");
Ctx=Canvas.getContext("2d");
rettangoloConCurve(Ctx,"red",50,30,300,200);
function rettangoloConCurve(contesto,colore,x1,y1,larg,alt)
{
let raggio=20;
contesto.beginPath();
contesto.strokeStyle="black";
contesto.arc(x1+raggio,y1+raggio,raggio,Math.PI,Math.PI*3/2,false); //contesto.closePath();
lineaRett(contesto,"black",x1+raggio,y1,x1+larg-raggio,y1);
contesto.arc(x1+larg-raggio,y1+raggio,raggio,Math.PI*3/2,Math.PI*2,false); //contesto.closePath();
lineaRett(contesto,"black",x1+larg,y1+raggio,x1+larg,y1+alt-raggio);
contesto.arc(x1+larg-raggio,y1+alt-raggio,raggio,Math.PI*2,Math.PI/2,false); //contesto.closePath();
lineaRett(contesto,"black",x1+larg-raggio,y1+alt,x1+raggio,y1+alt);
contesto.arc(x1+raggio,y1+alt-raggio,raggio,Math.PI/2,Math.PI,false); //contesto.closePath();
lineaRett(contesto,"black",x1,y1+alt-raggio,x1,y1+raggio);
contesto.closePath();
contesto.stroke();
contesto.fillStyle=colore;
contesto.fill();
contesto.beginPath();
contesto.moveTo(x1,y1+raggio);
contesto.lineTo(x1+raggio,y1);
contesto.lineTo(x1+larg,y1+raggio);
contesto.lineTo(x1+larg-raggio,y1+alt);
contesto.lineTo(x1,y1+alt-raggio);
contesto.closePath();
contesto.fill();
}
function lineaRett(contesto,colore,x1,y1,x2,y2)
{
contesto.moveTo(x1,y1);
contesto.lineTo(x2,y2);
contesto.strokeStyle=colore;
contesto.lineWidth=1;
contesto.lineCap="butt";
}
</script>