CanvasRenderingContext2D.arc()

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

Ver la compatibilidad completa
Más información

El método CanvasRenderingContext2D .arc() de la API de Canvas 2D añade un arco a la trayectoria centrada en la posición (x, y) con el radio r comenzando en startAngle y terminando en endAngle que va en la dirección dada en sentido antihorario (predeterminado en sentido horario) .

Sintaxis

Void ctx .arc (x, y, radio, startAngle, endAngle, antihorario);

Parámetros

x: La coordenada x del centro del arco.
y: La coordenada y del centro del arco.
radius: El radio del arco.
startAngle: El ángulo en el que se inicia el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
endAngle: El ángulo en el que termina el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
anticlockwise Opcional: Un Boolean opcional que, si es true , hace que el arco se dibuje en sentido contrario a las agujas del reloj entre los dos ángulos. De forma predeterminada, se dibuja en el sentido de las agujas del reloj.

Ejemplos

Utilizando el método del `arc`

Esto es sólo un simple fragmento de código dibujando un círculo.

HTML

html

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function () {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Diferentes formas demostradas

En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar arc() .

<canvas id="canvas" width="150" height="200"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Draw shapes
for (var i = 0; i < 4; i++) {
  for (var j = 0; j < 3; j++) {
    ctx.beginPath();
    var x = 25 + j * 50; // x coordinate
    var y = 25 + i * 50; // y coordinate
    var radius = 20; // Arc radius
    var startAngle = 0; // Starting point on circle
    var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
    var anticlockwise = i % 2 == 1; // Draw anticlockwise

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

Especificaciones

Especificación
HTML # dom-context-2d-arc-dev

Compatibilidad con navegadores

Ver también

La interfaz que lo define, CanvasRenderingContext2D

Ayuda a mejorar MDN

Aprende cómo colaborar

Esta página se modificó por última vez el 30 jun 2026 por colaboradores de MDN.

Ver esta página en GitHub • Informar de un problema con este contenido