Canvas roundRect()
The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.
The radii of the corners can be specified in much the same way as the CSS border-radius property.
Like other methods that modify the current path, this method does not directly render anything. To draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 112 | 16 | 99 | 16 | |
| The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path. | 99 | 99 | 112 | 16.4 | 99 | 16.4 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
JAVASCRIPT
roundRect(x, y, width, height, radii)Use cases
-
Using Canvas roundRect()
The CanvasRenderingContext2D.
Cautions
- May not be supported in older browsers.
Implementation notes
- Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.