Tag Archives: arcs

Drawing arcs using the arcTo method

This tutorial explains how to draw arcs using the arcTo method. You will learn how to draw arcs and join arcs to other lines on the canvas.

This is what the arc attached to lines will look like:

Screen Shot 2015-05-08 at 6.56.39 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>The arcTo method</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.moveTo(50,50);
 ctx.lineTo(200,50);
 ctx.arcTo(250,50,250,100,50); // x1, y1, x2, y2, radius
 ctx.lineTo(250,200);
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Drawing quadratic curves

Drawing paths on the canvas

This tutorial explains how to draw paths on the canvas. Paths can be used to build shapes by creating lines, filling the path, and filling the background with a colour, as seen in the example below.

Screen Shot 2017-04-14 at 5.06.13 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Drawing paths</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.beginPath(); // this will reset the current default path
 ctx.moveTo(50,50); // x, y coordinates of start of line
 ctx.lineTo(250,50); // creates new line to these x, y coordinates
 ctx.lineTo(250,150); // creates another line to these x, y coordinates
 ctx.lineTo(50,150);
 ctx.fill();
 ctx.closePath(); // this will close the path to complete the rectangle (adds the last line on the left side of rectangle)
 ctx.stroke(); // strokes the current path
 alert(ctx.isPointInPath(75,75)); // returns a true/false value indicating whether the specified point is within a path
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Clipping shapes on the canvas

Drawing arcs and circles with the HTML5 canvas

This tutorial explains how to use the HTML5 canvas and JavaScript to draw circles and arcs on the canvas. The code below shows how to draw a full circle, but you can easily modify it to draw arcs (the circle is made up of arcs).

In this example, the circle will be inside a canvas with a black border and will look like this:

Screen Shot 2015-03-12 at 10.47.58 am

Watch the video below and then scroll down to see the sample code.

Refer to the comments in the code to find out what is happening on each line of the code.

<!DOCTYPE html>
<html>
<head>
 <title>Arcs and circles</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.arc(150,150,100,0,Math.PI*2,false); // x, y, radius, startAngle, endAngle, true/false (for clockwise and anticlockwise)
 // Math.PI gives semi-circle
 // Math.PI*2 gives full circle
 // Numbers can also be used instead of Math.P eg. 6.28
 // try using numbers less than 6.28 to see how you get less of a circle
 ctx.stroke();
 //try doing semi-circle that is (flipped over) by chaning false to true
 
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>

Next tutorial: Drawing arcs using the arcTo method