border radius on rect

This commit is contained in:
Dustin Swan 2026-02-03 13:50:06 -07:00
parent 58715f42bf
commit 441957185e
No known key found for this signature in database
GPG key ID: 30D46587E2100467
4 changed files with 58 additions and 32 deletions

View file

@ -39,10 +39,29 @@ export function render(ui: UIValue, canvas: HTMLCanvasElement) {
function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: number) {
switch (ui.kind) {
case 'rect':
case 'rect': {
ctx.fillStyle = ui.color;
ctx.fillRect(x, y, ui.w, ui.h);
if (ui.radius && ui.radius > 0) {
const r = Math.min(ui.radius, ui.w / 2, ui.h / 2);
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.lineTo(x + ui.w - r, y);
ctx.arcTo(x + ui.w, y, x + ui.w, y + r, r);
ctx.lineTo(x + ui.w, y + ui.h - r);
ctx.arcTo(x + ui.w, y + ui.h, x + ui.w - r, y + ui.h, r);
ctx.lineTo(x + r, y + ui.h);
ctx.arcTo(x, y + ui.h, x, y + ui.h - r, r);
ctx.lineTo(x, y + r);
ctx.arcTo(x, y, x + r, y, r);
ctx.closePath();
ctx.fill();
} else {
ctx.fillRect(x, y, ui.w, ui.h);
}
break;
}
case 'text':
ctx.fillStyle = 'black';