CanvasRenderingContext2D.roundedRect.ts

CanvasRenderingContext2D.prototype.roundedRect = function(x: number, y: number, width: number, height: number, radius: number) {
    const points = [
    [x + radius, y + radius],
    [x + width - radius, y + radius],
    [x + width - radius, y + height - radius],
    [x + radius, y + height - radius]
  ]
  let startAngle = 1 * Math.PI
  points.forEach((set, i) => {
    this.arc(set[0], set[1], radius, startAngle, startAngle + 0.5 * Math.PI)
    startAngle += 0.5* Math.PI
    if(startAngle >= 2 * Math.PI){
      startAngle = 0
    }
  })
}

CanvasRenderingContext2D.prototype.fillRoundedRect = function (x: number, y: number, width: number, height: number, radius: number) {
  this.beginPath()
  this.roundedRect(x, y, width, height, radius)
  this.closePath()
  this.fill()
}

CanvasRenderingContext2D.prototype.strokeRoundedRect = function (x: number, y: number, width: number, height: number, radius: number) {
  this.beginPath()
  this.roundedRect(x, y, width, height, radius)
  this.closePath()
  this.stroke()
}