14.6 (Rounded Rectangle) Generalize the example in Fig 14.7 into a roundedRect f
ID: 3796600 • Letter: 1
Question
14.6 (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
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.