Rounded Rectangle

by wlouie1

HTML

<h1>DOM</h1>
<div id="dom"></div>

<h1>SVG</h1>
<svg id="svg" width="100" height="50">
  <rect x="0" y="0" width="100" height="50" rx="15" fill="#40E0D0" />
</svg>

<h1>Canvas 2D</h1>
<canvas id="canvas" width="100" height="50"></canvas>

CSS

#dom {
  width: 100px;
  height: 50px;
  background-color: #40E0D0;
  border-radius: 15px;
}

JavaScript

// Canvas 2D to draw a turquoise rounded rectangle.
// See HTML and CSS for DOM and SVG.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const x = 0;
const y = 0;
const width = 100;
const height = 50;
const radius = 15;

ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius);
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.fillStyle="#40E0D0"
ctx.fill();