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

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..