=
18.207.240.230

Daschmi's Notizblog

Logo des Etikators - Tool um online drucken von Etiketten für selbst angefertigte Tinkturen

Canvas und Rechtecke mit abgerundeten Ecken

Erstellt in Sonstiges am 31. Juli 2019

Für den Etikator brauchte ich eine kleine Funktion, die in der HTML5 Visualisierung runde Ecken darstellt. Diese habe ich mit dem Canvas Element und folgender Funktion realisiert:

function roundRect(ctx, x, y, w, h, r) {
   
   ctx.beginPath();
   ctx.moveTo(x + r, y);
   ctx.lineTo(x + w - r, y);
   ctx.quadraticCurveTo(x + w, y, x + w, y + r);
   ctx.lineTo(x + w, y + h - r);
   ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
   ctx.lineTo(x + r, y + h);
   ctx.quadraticCurveTo(x, y + h, x, y + h - r);
   ctx.lineTo(x, y + r);
   ctx.quadraticCurveTo(x, y, x + r, y);
   ctx.closePath();

}