Javascript: Draw rounded rectangle in canvas

Canvas doesn't provide a method to do rounded rectangles. But we can make one with arcs and lineTos.

We can also add it to the CanvasRenderingContext2D prototype. This means we can use it like the below. And set your own stroke and fill styles:

  let canvas = document.getElementById('example');
  let ctx = canvas.getContext('2d');  
  ctx.beginPath();
  ctx.roundedRectangle(0, 0, 100, 100, 20);
  ctx.stroke();
  
  ctx.beginPath();  
  ctx.roundedRectangle(5, 5, 90, 90, 15);
  ctx.stroke();     

Here's the function to draw a rounded rectangle.

CanvasRenderingContext2D.prototype.roundedRectangle = function(x, y, width, height, rounded) {
  const radiansInCircle = 2 * Math.PI
  const halfRadians = (2 * Math.PI)/2
  const quarterRadians = (2 * Math.PI)/4  
  
  // top left arc
  this.arc(rounded + x, rounded + y, rounded, -quarterRadians, halfRadians, true)
  
  // line from top left to bottom left
  this.lineTo(x, y + height - rounded)

  // bottom left arc  
  this.arc(rounded + x, height - rounded + y, rounded, halfRadians, quarterRadians, true)  
  
  // line from bottom left to bottom right
  this.lineTo(x + width - rounded, y + height)

  // bottom right arc
  this.arc(x + width - rounded, y + height - rounded, rounded, quarterRadians, 0, true)  
  
  // line from bottom right to top right
  this.lineTo(x + width, y + rounded)  

  // top right arc
  this.arc(x + width - rounded, y + rounded, rounded, 0, -quarterRadians, true)  
  
  // line from top right to top left
  this.lineTo(x + rounded, y)  
}
javascript canvas

Edit on github
comments powered by Disqus
Click me