Как закруглить углы в canvas?

Question

function drawBar(ctx, x, y, w, h, color = '#000', radius = 0) {
  ctx.save();
  if (radius > 0) {
    ctx.arc(x, y, w, h, radius * Math.PI);
  }
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
  ctx.restore();
}
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
canvas.style.width = canvas.offsetWidth +'px';
canvas.style.height = canvas.offsetHeight +'px';
canvas.width = canvas.offsetWidth * 2;
canvas.height = canvas.offsetHeight * 2;

drawBar(ctx, 40, 40, 160, 60, '#090', 5);

canvas {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}

<canvas></canvas>

Answer 1

Можно как-то так сделать..

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arcTo(0, 100, 0, 0, 10);
ctx.arcTo(0, 0, 100, 0, 10);
ctx.arcTo(100, 0, 100, 100, 10);
ctx.arcTo(100, 100, 0, 100, 10);
ctx.fill();

<canvas width="300" height="200"></canvas>

БЛОГ НА HUSL

Как закруглить углы в canvas?

Ответы (1 шт):