How to draw a rounded Rectangle on HTML Canvas?

HTML Code:

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

JavaScript Code:

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  ctx.beginPath();
  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);
  ctx.stroke();
  ctx.stroke();