I've recently started using the canvas tag and needed to draw rounded corner rectangles. I did find a good post explaing how to do it but I didn't find a nice method so I decided to create one. I took Futomi Hatano's code and abstracted it into a method.

/

• Draws a rounded rectangle using the current state of the canvas.
• If you omit the last three params, it will draw a rectangle
• outline with a 5 pixel border radius
• @param {CanvasRenderingContext2D} ctx
• @param {Number} x The top left x coordinate
• @param {Number} y The top left y coordinate
• @param {Number} width The width of the rectangle
• @param {Number} height The height of the rectangle
• @param {Number} radius The corner radius. Defaults to 5;
• @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
• @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true. */ 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[];
  

  } }

And it can be used like the following:

// My html contains a canvas with id "rounded-rect" 500X350 var ctx = document.getElementById["rounded-rect"].getContext["2d"]; // Draw using default border radius, // stroke it but no fill [function's default values] roundRect[ctx, 5, 5, 50, 50]; // To change the color on the rectangle, just manipulate the context ctx.strokeStyle = "rgb[255, 0, 0]"; ctx.fillStyle = "rgba[255, 255, 0, .5]"; roundRect[ctx, 100, 5, 100, 100, 20, true]; // Manipulate it again ctx.strokeStyle = "

2d6";

ctx.fillStyle = "

abc";

roundRect[ctx, 100, 200, 200, 100, 50, true];

Which will produce the following output:

For Firefox and Chrome [and maybe other browsers], you can do the following for syntactic sugar

CanvasRenderingContext2D.prototype.roundRect = function[x, y, width, height, radius, fill, stroke] { if [typeof stroke == "undefined" ] {

stroke = true;

} if [typeof radius === "undefined"] {

radius = 5;

} this.beginPath[]; this.moveTo[x + radius, y]; this.lineTo[x + width - radius, y]; this.quadraticCurveTo[x + width, y, x + width, y + radius]; this.lineTo[x + width, y + height - radius]; this.quadraticCurveTo[x + width, y + height, x + width - radius, y + height]; this.lineTo[x + radius, y + height]; this.quadraticCurveTo[x, y + height, x, y + height - radius]; this.lineTo[x, y + radius]; this.quadraticCurveTo[x, y, x + radius, y]; this.closePath[]; if [stroke] {

this.stroke[];

} if [fill] {

this.fill[];

} } // Now you can just call var ctx = document.getElementById["rounded-rect"].getContext["2d"]; ctx.roundRect[5, 5, 50, 50];

Here's a JsFiddle that you can edit freely

Question

We would like to know how to draw rounded rectangle with bezier Curve.

Answer

window.onload=function[]{
    var K = 4 * [Math.SQRT2-1] / 3; //constant for circles using Bezier curve.
    var canvas = document.createElement['canvas'];
    var ctx = canvas.getContext['2d'];
    canvas.width = 400;
    canvas.height = 200;
    document.body.appendChild[canvas];
    rounded_rect[ctx,10,10,200,150,20];
    function rounded_rect[ctx,left,top, width, height, radius]
    {
        var right=left+width;
        var bottom=top+height;
        ctx.beginPath[];
    // top left
        ctx.moveTo[left+radius,top];
    // top right
        ctx.lineTo[right-radius,top];
    //right top
        ctx.bezierCurveTo[right+radius*[K-1],top,right,top+radius*[1-K],right,top+radius];
    //right bottom
        ctx.lineTo[right,bottom-radius];
    //bottom right
        ctx.bezierCurveTo[right,bottom+radius*[K-1],right+radius*[K-1],bottom,right-radius,bottom];
    //bottom left
        ctx.lineTo[left+radius,bottom];
    //left bottom
        ctx.bezierCurveTo[left+radius*[1-K],bottom,left,bottom+radius*[K-1],left,bottom-radius];
    //left top
        ctx.lineTo[left,top+radius];
    //top left again    
        ctx.bezierCurveTo[left,top+radius*[1-K],left+radius*[1-K],top,left+radius,top];
        ctx.lineWidth=10;
        ctx.strokeStyle="rgb[0,0,0]";
        ctx.stroke[];
    }
}

The code above is rendered as follows:

How do you make a rounded rectangle in canvas?

var canvas = $["canvas"]. get[0];.

var ctx = canvas. getContext["2d"];.

canvas. width = $[document]. width[];.

canvas. height = $[document]. height[];.

CanvasRenderingContext2D. prototype. roundRect = function [x, y, width, height, radius] {.

if [width < 2 * radius] radius = width / 2;.

How to use Android canvas to draw a rectangle with only topleft and topright corners round?

If I want a 300x300 rect, with the top left and right rounded by 50 pixels, you can do: canvas. save[]; canvas. clipRect[0, 0, 300, 300]; canvas.

How to draw rectangle in javascript canvas?

To draw the rectangle onto a canvas, you can use the fill[] or stroke[] methods. Note: To both create and render a rectangle in one step, use the fillRect[] or strokeRect[] methods.

How do I add a border radius in Canva?

Adding borders and rounded corners to elements.

Click on an image or video..

On the toolbar above the editor, click on Border style..

Choose a border style..

Click and drag the slider to adjust the border weight and/or corner rounding. You may also enter a value in the field next to it..