How to draw a rounded Rectangle on HTML Canvas?

To draw a rectangle in HTML, use the canvas element. With canvas, use the rect() method to draw a rectangle. But, for creating a rounded rectangle, using the rect() method won’t work. We will be using the lineTo() and quadraticCurveTo() method to create a rounded rectangle.

This is how you can create a canvas in HTML5 −

You can learn how to create a rounded rectangle in canvas


      <title>HTML5 Canvas Tag</title>
      <canvas id="newCanvas" width="300" height="150"></canvas>
         var canvas = document.getElementById('newCanvas');
         var ctx = canvas.getContext('2d');
         ctx.moveTo(20, 10);
         ctx.lineTo(80, 10);
         ctx.quadraticCurveTo(90, 10, 90, 20);
         ctx.lineTo(90, 80);
         ctx.quadraticCurveTo(90, 90, 80, 90);
         ctx.lineTo(20, 90);
         ctx.quadraticCurveTo(10, 90, 10, 80);
         ctx.lineTo(10, 20);
         ctx.quadraticCurveTo(10, 10, 20, 10);


Updated on: 16-Dec-2021

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started