Canvas 2D RoundRect

by wlouie1

HTML

<h1>Canvas 2D Rounded Rectangle</h1>
<div id="supportText"></div>
<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

if (ctx.roundRect) {
  ctx.beginPath();
  ctx.fillStyle = "turquoise";
  ctx.roundRect(0, 0, 500, 200, [125, 50]);
  ctx.fill();
} else {
  const message = document.getElementById('supportText');
  message.textContent = 'Your browser currently does not support roundRect()';
}