Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw a rounded Rectangle on HTML Canvas?
To draw a rounded rectangle in HTML Canvas, we need to use the Canvas API methods. While the rect() method creates regular rectangles, it doesn't support rounded corners. Instead, we combine lineTo() for straight edges and quadraticCurveTo() for curved corners to create smooth rounded rectangles.
The HTML5 <canvas> element provides a drawing surface where we can create graphics using JavaScript. For rounded rectangles, we manually draw each side and corner using path methods.
Syntax
Following is the syntax for creating a rounded rectangle using canvas methods −
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.stroke(); // or ctx.fill()
Here, x and y are the starting coordinates, width and height define the rectangle size, and radius controls the corner roundness.
How It Works
Creating a rounded rectangle involves drawing four straight sides connected by four curved corners. The quadraticCurveTo() method creates smooth curves by defining a control point and an end point. Each corner requires careful positioning to ensure the curves connect seamlessly with the straight edges.
Basic Rounded Rectangle
Example
Following example demonstrates how to create a basic rounded rectangle with stroke outline −
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Rounded Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Rounded Rectangle Example</h2>
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw rounded rectangle
ctx.beginPath();
ctx.moveTo(30, 20);
ctx.lineTo(120, 20);
ctx.quadraticCurveTo(140, 20, 140, 40);
ctx.lineTo(140, 100);
ctx.quadraticCurveTo(140, 120, 120, 120);
ctx.lineTo(30, 120);
ctx.quadraticCurveTo(10, 120, 10, 100);
ctx.lineTo(10, 40);
ctx.quadraticCurveTo(10, 20, 30, 20);
ctx.strokeStyle = "#4285f4";
ctx.lineWidth = 2;
ctx.stroke();
</script>
</body>
</html>
The output displays a blue outlined rounded rectangle −
A blue outlined rounded rectangle with smooth curved corners
Filled Rounded Rectangle
Example
Following example creates a filled rounded rectangle with both fill and stroke −
<!DOCTYPE html>
<html>
<head>
<title>Filled Rounded Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Filled Rounded Rectangle</h2>
<canvas id="filledCanvas" width="350" height="220" style="border: 1px solid #ddd;"></canvas>
<script>
var canvas = document.getElementById('filledCanvas');
var ctx = canvas.getContext('2d');
// Draw filled rounded rectangle
ctx.beginPath();
ctx.moveTo(50, 30);
ctx.lineTo(200, 30);
ctx.quadraticCurveTo(220, 30, 220, 50);
ctx.lineTo(220, 150);
ctx.quadraticCurveTo(220, 170, 200, 170);
ctx.lineTo(50, 170);
ctx.quadraticCurveTo(30, 170, 30, 150);
ctx.lineTo(30, 50);
ctx.quadraticCurveTo(30, 30, 50, 30);
// Apply fill and stroke
ctx.fillStyle = "#e8f0fe";
ctx.fill();
ctx.strokeStyle = "#4285f4";
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
The output shows a light blue filled rectangle with a darker blue border −
A light blue filled rounded rectangle with a darker blue border
Reusable Rounded Rectangle Function
Example
Following example demonstrates a reusable function to draw rounded rectangles with customizable parameters −
<!DOCTYPE html>
<html>
<head>
<title>Reusable Rounded Rectangle Function</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Rounded Rectangles</h2>
<canvas id="multiCanvas" width="400" height="250" style="border: 1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('multiCanvas');
var ctx = canvas.getContext('2d');
function drawRoundedRect(x, y, width, height, radius, fillColor, strokeColor) {
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);
if (fillColor) {
ctx.fillStyle = fillColor;
ctx.fill();
}
if (strokeColor) {
ctx.strokeStyle = strokeColor;
ctx.lineWidth = 2;
ctx.stroke();
}
}
// Draw multiple rounded rectangles
drawRoundedRect(20, 20, 100, 60, 15, "#ffebee", "#e91e63");
drawRoundedRect(140, 20, 120, 60, 20, "#e8f5e8", "#4caf50");
drawRoundedRect(280, 20, 80, 60, 10, "#fff3e0", "#ff9800");
drawRoundedRect(20, 100, 150, 40, 25, "#f3e5f5", "#9c27b0");
drawRoundedRect(190, 100, 180, 40, 30, "#e1f5fe", "#03a9f4");
drawRoundedRect(80, 160, 240, 50, 35, "#f9fbe7", "#827717");
</script>
</body>
</html>
The output displays multiple rounded rectangles with different sizes, colors, and corner radii −
Six colorful rounded rectangles with varying sizes and corner radii arranged in three rows
Key Points
The
quadraticCurveTo(controlX, controlY, endX, endY)method creates smooth curves for corners.Always call
beginPath()before starting a new shape to avoid connecting to previous paths.Use
moveTo()to position the drawing cursor without creating a line.The corner radius determines how rounded the corners appear − larger values create more pronounced curves.
Call
stroke()for outlines,fill()for solid shapes, or both for filled shapes with borders.
Conclusion
Drawing rounded rectangles in HTML Canvas requires combining lineTo() for straight edges with quadraticCurveTo() for curved corners. By creating reusable functions, you can easily generate rounded rectangles with customizable dimensions, corner radii, and styling options for various design needs.
3K+ Views
