{"id":3080,"date":"2026-06-26T06:37:05","date_gmt":"2026-06-25T22:37:05","guid":{"rendered":"http:\/\/www.ofaruque.com\/blog\/?p=3080"},"modified":"2026-06-26T06:37:05","modified_gmt":"2026-06-25T22:37:05","slug":"how-to-draw-a-rectangle-with-rounded-corners-on-a-canvas-4aca-196691","status":"publish","type":"post","link":"http:\/\/www.ofaruque.com\/blog\/2026\/06\/26\/how-to-draw-a-rectangle-with-rounded-corners-on-a-canvas-4aca-196691\/","title":{"rendered":"How to draw a rectangle with rounded corners on a Canvas?"},"content":{"rendered":"

Hey there! I’m from a Canvas supplier, and today I wanna share with you how to draw a rectangle with rounded corners on a Canvas. It’s a pretty cool skill that can add a touch of elegance to your designs. Whether you’re a graphic designer, a web developer, or just someone who loves to create, this guide will walk you through the process step by step. Canvas<\/a><\/p>\n

<\/p>\n

Getting Started with Canvas<\/h3>\n

First things first, let’s talk a bit about Canvas. Canvas is a super handy HTML element that allows you to draw graphics on the fly using JavaScript. It’s like a blank canvas (pun intended) where you can bring your ideas to life. If you’re new to Canvas, don’t worry! It’s not as complicated as it sounds.<\/p>\n

To start using Canvas, you need to create a <canvas><\/code> element in your HTML file. Here’s a simple example:<\/p>\n

<canvas id="myCanvas" width="400" height="200"><\/canvas>\n<\/code><\/pre>\n
This code creates a Canvas element with an ID of myCanvas<\/code> and a width of 400 pixels and a height of 200 pixels. You can adjust these values to fit your needs.<\/p>\n
Next, you need to get a reference to the Canvas element in your JavaScript code. You can do this using the getElementById<\/code> method:<\/p>\n
const canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n<\/code><\/pre>\n
The getContext('2d')<\/code> method returns a 2D rendering context, which is what you’ll use to draw on the Canvas.<\/p>\n
Drawing a Rectangle with Rounded Corners<\/h3>\n
Now that you have your Canvas set up, let’s get to the fun part: drawing a rectangle with rounded corners. The basic idea is to draw four arcs for the corners and four straight lines for the sides.<\/p>\n
Here’s the code to draw a rounded rectangle:<\/p>\n
function drawRoundedRectangle(ctx, x, y, width, height, radius) {\n    ctx.beginPath();\n    ctx.moveTo(x + radius, y);\n    ctx.lineTo(x + width - radius, y);\n    ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);\n    ctx.lineTo(x + width, y + height - radius);\n    ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);\n    ctx.lineTo(x + radius, y + height);\n    ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);\n    ctx.lineTo(x, y + radius);\n    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);\n    ctx.closePath();\n    ctx.stroke();\n}\n\n\/\/ Usage\ndrawRoundedRectangle(ctx, 50, 50, 300, 100, 20);\n<\/code><\/pre>\n
Let’s break down what’s happening in this code:<\/p>\n
    \n
  1. ctx.beginPath()<\/code>: This method starts a new path. A path is a series of connected lines and shapes.<\/li>\n
  2. ctx.moveTo(x + radius, y)<\/code>: This method moves the starting point of the path to the specified coordinates. In this case, we’re moving to the top-left corner of the rectangle, offset by the radius.<\/li>\n
  3. ctx.lineTo(x + width - radius, y)<\/code>: This method draws a straight line from the current point to the specified coordinates. Here, we’re drawing the top side of the rectangle.<\/li>\n
  4. ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2)<\/code>: This method draws an arc. The first two parameters are the center of the arc, the third parameter is the radius, and the last two parameters are the starting and ending angles in radians. We’re using this method to draw the top-right corner of the rectangle.<\/li>\n
  5. The remaining lines of code follow a similar pattern, drawing the remaining sides and corners of the rectangle.<\/li>\n
  6. ctx.closePath()<\/code>: This method closes the path by drawing a line from the current point back to the starting point.<\/li>\n
  7. ctx.stroke()<\/code>: This method strokes the path with the current stroke style.<\/li>\n<\/ol>\n
    Customizing Your Rounded Rectangle<\/h3>\n
    Now that you know how to draw a basic rounded rectangle, you can customize it to fit your needs. Here are a few ways you can do that:<\/p>\n
    Changing the Color<\/h4>\n
    You can change the color of the rectangle by setting the strokeStyle<\/code> property of the rendering context. For example:<\/p>\n
    ctx.strokeStyle = 'blue';\ndrawRoundedRectangle(ctx, 50, 50, 300, 100, 20);\n<\/code><\/pre>\n
    This code will draw a blue rounded rectangle.<\/p>\n
    Filling the Rectangle<\/h4>\n
    You can also fill the rectangle with a color by using the fill<\/code> method instead of the stroke<\/code> method. For example:<\/p>\n
    function drawRoundedRectangle(ctx, x, y, width, height, radius) {\n    ctx.beginPath();\n    ctx.moveTo(x + radius, y);\n    ctx.lineTo(x + width - radius, y);\n    ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2);\n    ctx.lineTo(x + width, y + height - radius);\n    ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5);\n    ctx.lineTo(x + radius, y + height);\n    ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI);\n    ctx.lineTo(x, y + radius);\n    ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);\n    ctx.closePath();\n    ctx.fillStyle = 'green';\n    ctx.fill();\n}\n\n\/\/ Usage\ndrawRoundedRectangle(ctx, 50, 50, 300, 100, 20);\n<\/code><\/pre>\n
    This code will draw a green filled rounded rectangle.<\/p>\n
    Changing the Line Width<\/h4>\n
    You can change the width of the lines by setting the lineWidth<\/code> property of the rendering context. For example:<\/p>\n
    ctx.lineWidth = 5;\ndrawRoundedRectangle(ctx, 50, 50, 300, 100, 20);\n<\/code><\/pre>\n
    This code will draw a rounded rectangle with a line width of 5 pixels.<\/p>\n
    Why Choose Our Canvas?<\/h3>\n
    As a Canvas supplier, we offer high-quality Canvas products that are perfect for all your drawing needs. Our Canvas is made from durable materials that can withstand repeated use and provide a smooth surface for your designs.<\/p>\n
    Here are some of the benefits of choosing our Canvas:<\/p>\n