Cách vẽ hình chữ nhật bo tròn góc trên HTML Canvas

Canvas không có phương thức vẽ chữ nhật bo góc sẵn. Ta kết hợp lineTo() và quadraticCurveTo() để tạo góc bo tròn: vẽ đoạn thẳng đến gần góc, dùng quadraticCurveTo bo góc, lặp lại 4 góc.

Ví dụ

Mã sau vẽ chữ nhật bo góc (viền):

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Tag</title>
  </head>
  <body>
    <canvas id="newCanvas" width="300" height="150"></canvas>
    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.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();
    </script>
  </body>
</html>

Giải thích: quadraticCurveTo(cpx, cpy, x, y) vẽ cong bậc 2 từ điểm hiện tại đến (x,y) với điểm kiểm soát (cpx,cpy). Ở trên, điểm kiểm soát đặt tại góc vuông để tạo cung tròn 1/4 đường tròn.