Comment faire un rectangle aux coins arrondis dans canvas

Ce n'est pas prévu par le standard Canvas, mais on peut l'obtenir avec quatre courbes formant un angle droit (et arrondi).

On peut arrondir les coins d'un rectangle avec quadraticCurve

Cela peut se faire en remplaçant la fonction rect par quatre courbes quadratiques.

Requiert un navigateur récent: Edge, Chrome, Firefox, Safari.

Code:

function roundedRectangle(x, y, w, h)
{
  var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
  var mx = x + w / 2;
  var my = y + h / 2;
  context.beginPath();
  context.strokeStyle="green";   
  context.lineWidth="4";   
  context.moveTo(x,my);
  context.quadraticCurveTo(x, y, mx, y);
  context.quadraticCurveTo(x+w, y, x+w, my);
  context.quadraticCurveTo(x+w, y+h, mx, y+h);
  context.quadraticCurveTo(x, y+h, x, my);      
  context.stroke();
}
roundedRectangle(10, 10, 200, 100);

La courbe va du milieu d'un coté à un autre. Mais même si on peut placer les points de contrôle plus près des petits cotés, on n'a pas pour autant un angle droit.

Pour un angle droit, on combine une courbe et une droite

Pour ce faire on combine une ligne droite et une courbe quadratique (ou un arc).

Code:

context.moveTo(x+radius, y);
context.lineTo(x+w-radius, y);
context.quadraticCurveTo(x+w, y, x+w, y+radius);

La valeur donnée en radius équivaut plus ou moins au rayon du coin qui est le quart d'un cercle et correspond au point de départ de la courbe, dans le prolongement d'une ligne droite.

Un vrai rectangle à coins arrondi combine quatre de ces figures

Il suffit de combiner quatre figures de ce style pour former un rectangle complet.

Code source final du rectangle aux coins arrondis:


<canvas id="canvas6" width="400" height="120"></canvas>
<script type="text/javascript">
function roundRect(x, y, w, h, radius)
{
  var canvas = document.getElementById("canvas6");
  var context = canvas.getContext("2d");
  var r = x + w;
  var b = y + h;
  context.beginPath();
  context.strokeStyle="green";
  context.lineWidth="4";
  context.moveTo(x+radius, y);
  context.lineTo(r-radius, y);
  context.quadraticCurveTo(r, y, r, y+radius);
  context.lineTo(r, y+h-radius);
  context.quadraticCurveTo(r, b, r-radius, b);
  context.lineTo(x+radius, b);
  context.quadraticCurveTo(x, b, x, b-radius);
  context.lineTo(x, y+radius);
  context.quadraticCurveTo(x, y, x+radius, y);
  context.stroke();
}
roundRect(10, 10, 200, 100, 20);
</script>

La taille du code paraît imposante mais le bytecode généré par le compilateur JavaScript le réduit en quelques instructions.

Application

A savoir aussi...