Drawing Arcs
We use the arc and arcTo methods to draw arcs on the canvas.
Name | Description | Returns |
---|---|---|
arc(x, y, rad, startAngle, endAngle,direction) | Draws an arc to (x, y) with radius rad, start angle startAngle, and finish angle endAngle. | void |
arcTo(x1, y1, x2, y2,rad) | Draw an arc to (x2, y2) that passes (x1, y1) and has radius rad | void |
Using the arcTo Method
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var point1 = [ 100, 10 ];
var point2 = [ 200, 10 ];
var point3 = [ 200, 110 ];
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 100);
ctx.stroke();
drawPoint(100, 200);
drawPoint(20, 110);
drawPoint(20, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(100, 110);
ctx.lineTo(20, 70);
ctx.stroke();
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>
Drawing arcs in response to mouse movements
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
border: thin solid black
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var canvasElem = document.getElementById("canvas");
var ctx = canvasElem.getContext("2d");
draw();
function draw() {
ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.arcTo(50, 110, 40, 70, 50);
ctx.stroke();
drawPoint(100, 200);
drawPoint(110, 110);
drawPoint(70, 70);
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(110, 110);
ctx.lineTo(40, 70);
ctx.stroke();
}
function drawPoint(x, y) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.strokeRect(x - 2, y - 2, 4, 4);
}
</script>
</body>
</html>
If the control key is pressed, the first point is moved. If the shift key is pressed, the second point is moved. If neither key is pressed, the third point is moved.
Using the arc Method
arc(x, y, radiusOfArc, startAngle, endAngle, clockwiseTrueOrFalse);
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="140">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "yellow";
ctx.lineWidth = "3";
ctx.beginPath();
ctx.arc(200, 70, 60, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 70, 60, Math.PI / 2, Math.PI, true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
var val = 0;
for ( var i = 0; i < 4; i++) {
ctx.arc(50, 70, 60, val, val + Math.PI / 4, false);
val += Math.PI / 2;
}
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>
Home
HTML CSS Book
HTML
HTML CSS Book
HTML
canvas:
- Getting Started with the Canvas Element
- Getting a Canvas Context
- Drawing Rectangles
- Canvas Drawing State
- Setting the Line Join Style
- Using Gradients
- Using Patterns
- Using smaller shapes with an image pattern
- Drawing Images
- Using Video Images
- Using Canvas Images
- Setting the Fill & Stroke Styles
- Saving and Restoring Drawing State
- Drawing Using Paths
- Drawing Arcs
- Drawing Bezier Curves
- Drawing Text
- Using Shadows
- Using Transparency
Related: