CanvasRenderingContext2D.arcTo()
The CanvasRenderingContext2D
.arcTo()
method of the Canvas 2D API adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
Syntax
JavaScript
Copy Code
void <var>ctx.arcTo(x1, y1, x2, y2, radius);</var>
Parameters
-
x1
- The x axis of the coordinate for the first control point.
-
y1
- The y axis of the coordinate for the first control point.
-
x2
- The x axis of the coordinate for the second control point.
-
y2
- The y axis of the coordinate for the second control point.
-
radius
- The arc's radius.
Examples
Using the arcTo
method
This is just a simple code snippet drawing an arc. The base point is blue and the two control points are red.
HTML
HTML
Copy Code
<canvas id="canvas"></canvas>
JavaScript
JavaScript
Copy Code
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150,100,50,20,30); ctx.stroke(); ctx.fillStyle = 'blue'; // base point ctx.fillRect(150, 20, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(150, 100, 10, 10); // control point two ctx.fillRect(50, 20, 10, 10);
Trying the arcTo
parameters
Edit the code below and see your changes update live in the canvas:
HTML
Copy Code
<canvas id="canvas" class="playable-canvas" height="200" width="400"></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.moveTo(150, 20); ctx.arcTo(150,200,50,0,20); ctx.stroke();</textarea>
JavaScript
Copy Code
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);
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.arcTo' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/arcto