(Rounded Rectangle) Generalize the example in Fig 14.7 into a roundedRect functi
ID: 672581 • Letter: #
Question
(Rounded Rectangle) Generalize the example in Fig 14.7 into a roundedRect function and call it twice with different arguments to place two different rounded rectangles on the canvas. Example Below.
14.7
<!DOCTYPE html>
<!-- fig. 14.7 -->
<html>
<head>
<meta charset = "utf-8">
<title>Quadratic Curves</title>
</head>
<body>
<canvas id = "drawRoundedRect" width = "130" height = "130"
>
< /canvas>
< script>
var canvas = document.getElementById("drawRoundedRect");
var context = canvas.getContext("2d")
context.beginPath();
context.moveTo(15, 5);
context.lineTo(95, 5);
context.quadraticCurveTo(105, 5, 105, 15);
context.lineTo(105, 95);
context.quadraticCurveTo(105, 105, 95, 105);
context.lineTo(15, 105);
context.quadraticCurveTo(5, 105, 5, 95);
context.lineTo(5, 15);
context.quadraticCurveTo(5, 5, 15, 5);
context.closePath();
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "royalblue";
context.lineWidth = 6;
context.stroke();
< /script>
</body>
</html>
Explanation / Answer
Sample output:
Modified code:
<!DOCTYPE html>
<html>
<body>
Hieght: <input type="text" id="h" value="50"><br>
Width: <input type="text" id="w" value="50"><br>
<button>Draw</button>
<p>Enter width hieght and click the "Draw" button to draw Rounded Rectangle.</p>
<canvas id = "drawRoundedRect" width = "400" height = "400"
>
< /canvas>
<script>
function drawing()
{
w= document.getElementById("w").value;
h= document.getElementById("h").value;
var canvas = document.getElementById("drawRoundedRect");
var context = canvas.getContext("2d")
context.beginPath();
context.moveTo(15,5 );
context.lineTo(w-10, 5);
context.quadraticCurveTo(w,5,w,10);
context.lineTo(w,h-10);
context.quadraticCurveTo(w,h,w-10,h);
context.lineTo(5+10,h);
context.quadraticCurveTo(5,h,5,h-10);
context.lineTo(5,10+5);
context.quadraticCurveTo(5,5,5+10,5);
context.closePath();
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "royalblue";
context.lineWidth = 3;
context.stroke();
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.