Home ยป How to draw a rounded Rectangle on HTML Canvas?

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.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);

Leave a Reply

Your email address will not be published. Required fields are marked *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock