Draw Circle on Canvas Html Javascript
Drawing shapes with canvas
- « Previous
- Next »
Now that we take set our sheet environment, we tin get into the details of how to draw on the canvas. Past the finish of this commodity, you will have learned how to depict rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be done.
The grid
Earlier nosotros can get-go drawing, we need to talk most the sheet filigree or coordinate space. Our HTML skeleton from the previous page had a canvass element 150 pixels wide and 150 pixels high.
Normally 1 unit in the grid corresponds to 1 pixel on the sheet. The origin of this grid is positioned in the meridian left corner at coordinate (0,0). All elements are placed relative to this origin. And then the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (10,y). Afterwards in this tutorial we'll run across how we tin can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default.
Cartoon rectangles
Unlike SVG, <sheet> only supports ii primitive shapes: rectangles and paths (lists of points continued past lines). All other shapes must be created by combining i or more than paths. Luckily, we have an assortment of path drawing functions which make information technology possible to compose very complex shapes.
Beginning let's look at the rectangle. In that location are three functions that draw rectangles on the canvass:
-
fillRect(x, y, width, top) -
Draws a filled rectangle.
-
strokeRect(x, y, width, height) -
Draws a rectangular outline.
-
clearRect(x, y, width, top) -
Clears the specified rectangular surface area, making it fully transparent.
Each of these three functions takes the same parameters. ten and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and elevation provide the rectangle's size.
Below is the draw() function from the previous page, merely now it is making use of these three functions.
Rectangular shape case
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvass. getContext ( '2nd' ) ; ctx. fillRect ( 25 , 25 , 100 , 100 ) ; ctx. clearRect ( 45 , 45 , threescore , 60 ) ; ctx. strokeRect ( 50 , 50 , 50 , l ) ; } } This example's output is shown below.
The fillRect() function draws a big black foursquare 100 pixels on each side. The clearRect() office then erases a 60x60 pixel square from the center, and so strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.
In upcoming pages we'll see 2 alternative methods for clearRect(), and we'll besides encounter how to modify the color and stroke style of the rendered shapes.
Different the path functions we'll run into in the side by side section, all three rectangle functions describe immediately to the canvas.
Drawing paths
Now permit's look at paths. A path is a list of points, connected by segments of lines that can be of dissimilar shapes, curved or not, of different width and of different colour. A path, or fifty-fifty a subpath, can be closed. To make shapes using paths, we have some actress steps:
- Kickoff, yous create the path.
- Then you lot use cartoon commands to draw into the path.
- In one case the path has been created, you can stroke or fill the path to render information technology.
Here are the functions used to perform these steps:
-
beginPath() -
Creates a new path. Once created, hereafter drawing commands are directed into the path and used to build the path up.
- Path methods
-
Methods to prepare different paths for objects.
-
closePath() -
Adds a straight line to the path, going to the beginning of the current sub-path.
-
stroke() -
Draws the shape by stroking its outline.
-
fill() -
Draws a solid shape by filling the path's content area.
The starting time step to create a path is to telephone call the beginPath(). Internally, paths are stored every bit a list of sub-paths (lines, arcs, etc) which together class a shape. Every time this method is called, the list is reset and nosotros can start drawing new shapes.
Note: When the current path is empty, such as immediately afterwards calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, yous will almost always want to specifically ready your starting position after resetting a path.
The second stride is calling the methods that really specify the paths to be drawn. We'll see these shortly.
The third, and an optional step, is to call closePath(). This method tries to shut the shape past cartoon a directly line from the current betoken to the offset. If the shape has already been closed or there's only ane bespeak in the listing, this function does nothing.
Note: When you call fill(), any open shapes are closed automatically, and then you don't have to call closePath(). This is not the case when you telephone call stroke().
Drawing a triangle
For example, the lawmaking for drawing a triangle would expect something similar this:
function depict ( ) { var sheet = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 75 , fifty ) ; ctx. lineTo ( 100 , 75 ) ; ctx. lineTo ( 100 , 25 ) ; ctx. fill up ( ) ; } } The event looks like this:
Moving the pen
One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveTo() part. You can probably best think of this as lifting a pen or pencil from one spot on a slice of paper and placing it on the side by side.
-
moveTo(x, y) -
Moves the pen to the coordinates specified by
tenandy.
When the canvas is initialized or beginPath() is called, yous typically will want to use the moveTo() function to identify the starting signal somewhere else. Nosotros could as well employ moveTo() to draw unconnected paths. Take a wait at the smiley face beneath.
To endeavour this for yourself, you tin can utilise the code snippet below. Just paste it into the draw() function we saw before.
office depict ( ) { var canvass = document. getElementById ( 'canvas' ) ; if (sheet.getContext) { var ctx = canvass. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. arc ( 75 , 75 , fifty , 0 , Math. PI * 2 , true ) ; // Outer circumvolve ctx. moveTo ( 110 , 75 ) ; ctx. arc ( 75 , 75 , 35 , 0 , Math. PI , false ) ; // Oral cavity (clockwise) ctx. moveTo ( 65 , 65 ) ; ctx. arc ( sixty , 65 , v , 0 , Math. PI * 2 , true ) ; // Left center ctx. moveTo ( 95 , 65 ) ; ctx. arc ( 90 , 65 , v , 0 , Math. PI * 2 , true ) ; // Right middle ctx. stroke ( ) ; } } The result looks like this:
If you'd like to see the connecting lines, you tin can remove the lines that telephone call moveTo().
Annotation: To learn more about the arc() office, come across the Arcs section below.
Lines
For drawing straight lines, apply the lineTo() method.
-
lineTo(10, y) -
Draws a line from the current drawing position to the position specified by
xandy.
This method takes two arguments, x and y, which are the coordinates of the line's end signal. The starting point is dependent on previously drawn paths, where the cease signal of the previous path is the starting betoken for the following, etc. The starting indicate can too be changed by using the moveTo() method.
The case beneath draws two triangles, one filled and one outlined.
part draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; // Filled triangle ctx. beginPath ( ) ; ctx. moveTo ( 25 , 25 ) ; ctx. lineTo ( 105 , 25 ) ; ctx. lineTo ( 25 , 105 ) ; ctx. fill ( ) ; // Stroked triangle ctx. beginPath ( ) ; ctx. moveTo ( 125 , 125 ) ; ctx. lineTo ( 125 , 45 ) ; ctx. lineTo ( 45 , 125 ) ; ctx. closePath ( ) ; ctx. stroke ( ) ; } } This starts past calling beginPath() to kickoff a new shape path. We then use the moveTo() method to move the starting betoken to the desired position. Below this, two lines are drawn which make up two sides of the triangle.
You'll notice the difference betwixt the filled and stroked triangle. This is, every bit mentioned above, considering shapes are automatically closed when a path is filled, simply not when they are stroked. If we left out the closePath() for the stroked triangle, only 2 lines would have been drawn, not a consummate triangle.
Arcs
To draw arcs or circles, we employ the arc() or arcTo() methods.
-
arc(x, y, radius, startAngle, endAngle, counterclockwise) -
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by counterclockwise (defaulting to clockwise).
-
arcTo(x1, y1, x2, y2, radius) -
Draws an arc with the given control points and radius, continued to the previous point by a straight line.
Let's accept a more detailed look at the arc method, which takes half dozen parameters: x and y are the coordinates of the center of the circle on which the arc should be fatigued. radius is self-explanatory. The startAngle and endAngle parameters define the outset and terminate points of the arc in radians, along the curve of the circle. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is fatigued clockwise.
Note: Angles in the arc function are measured in radians, non degrees. To catechumen degrees to radians you lot tin use the following JavaScript expression: radians = (Math.PI/180)*degrees.
The post-obit instance is a piddling more than circuitous than the ones we've seen above. It draws 12 dissimilar arcs all with dissimilar angles and fills.
The two for loops are for looping through the rows and columns of arcs. For each arc, we start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in existent life.
The 10 and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (one-half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.
The statement for the clockwise parameter results in the first and third row being fatigued equally clockwise arcs and the 2d and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.
Annotation: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.
function draw ( ) { var canvass = certificate. getElementById ( 'canvass' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( 'second' ) ; for ( var i = 0 ; i < 4 ; i++ ) { for ( var j = 0 ; j < 3 ; j++ ) { ctx. beginPath ( ) ; var x = 25 + j * 50 ; // ten coordinate var y = 25 + i * l ; // 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 circumvolve var counterclockwise = i % 2 !== 0 ; // clockwise or counterclockwise ctx. arc (x, y, radius, startAngle, endAngle, counterclockwise) ; if (i > 1 ) { ctx. fill ( ) ; } else { ctx. stroke ( ) ; } } } } } Bezier and quadratic curves
The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw circuitous organic shapes.
-
quadraticCurveTo(cp1x, cp1y, x, y) -
Draws a quadratic Bézier bend from the current pen position to the stop point specified by
xandy, using the control betoken specified bycp1xandcp1y. -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -
Draws a cubic Bézier bend from the current pen position to the end indicate specified past
xandy, using the control points specified past (cp1x,cp1y) and (cp2x, cp2y).
The difference between these is that a quadratic Bézier curve has a beginning and an end point (blue dots) and merely 1 control point (indicated by the ruby dot) while a cubic Bézier curve uses ii command points. 
The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the showtime control signal, and cp2x and cp2y are the coordinates of the second command betoken.
Using quadratic and cubic Bézier curves can exist quite challenging, because dissimilar vector drawing software similar Adobe Illustrator, we don't have straight visual feedback as to what we're doing. This makes it pretty difficult to draw circuitous shapes. In the following instance, nosotros'll be cartoon some elementary organic shapes, merely if yous have the time and, virtually of all, the patience, much more than circuitous shapes tin can be created.
There's cypher very difficult in these examples. In both cases we see a succession of curves beingness drawn which finally result in a complete shape.
Quadratic Bezier curves
This example uses multiple quadratic Bézier curves to render a voice communication balloon.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = sail. getContext ( '2d' ) ; // Quadratic curves instance ctx. beginPath ( ) ; ctx. moveTo ( 75 , 25 ) ; ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.five ) ; ctx. quadraticCurveTo ( 25 , 100 , 50 , 100 ) ; ctx. quadraticCurveTo ( 50 , 120 , 30 , 125 ) ; ctx. quadraticCurveTo ( 60 , 120 , 65 , 100 ) ; ctx. quadraticCurveTo ( 125 , 100 , 125 , 62.5 ) ; ctx. quadraticCurveTo ( 125 , 25 , 75 , 25 ) ; ctx. stroke ( ) ; } } Cubic Bezier curves
This example draws a heart using cubic Bézier curves.
function draw ( ) { var canvass = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2nd' ) ; // Cubic curves instance ctx. beginPath ( ) ; ctx. moveTo ( 75 , forty ) ; ctx. bezierCurveTo ( 75 , 37 , 70 , 25 , fifty , 25 ) ; ctx. bezierCurveTo ( 20 , 25 , 20 , 62.5 , xx , 62.5 ) ; ctx. bezierCurveTo ( 20 , lxxx , xl , 102 , 75 , 120 ) ; ctx. bezierCurveTo ( 110 , 102 , 130 , lxxx , 130 , 62.v ) ; ctx. bezierCurveTo ( 130 , 62.five , 130 , 25 , 100 , 25 ) ; ctx. bezierCurveTo ( 85 , 25 , 75 , 37 , 75 , xl ) ; ctx. fill ( ) ; } } Rectangles
In addition to the three methods we saw in Drawing rectangles, which depict rectangular shapes directly to the canvas, at that place'southward too the rect() method, which adds a rectangular path to a currently open path.
-
rect(x, y, width, height) -
Draws a rectangle whose superlative-left corner is specified by (
ten,y) with the specifiedwidthandheight.
Before this method is executed, the moveTo() method is automatically chosen with the parameters (10,y). In other words, the electric current pen position is automatically reset to the default coordinates.
Making combinations
So far, each example on this page has used only 1 type of path function per shape. However, at that place's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.
function describe ( ) { var canvass = document. getElementById ( 'sail' ) ; if (canvas.getContext) { var ctx = canvass. getContext ( '2d' ) ; roundedRect (ctx, 12 , 12 , 150 , 150 , xv ) ; roundedRect (ctx, 19 , xix , 150 , 150 , 9 ) ; roundedRect (ctx, 53 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 53 , 119 , 49 , 16 , vi ) ; roundedRect (ctx, 135 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 135 , 119 , 25 , 49 , x ) ; ctx. beginPath ( ) ; ctx. arc ( 37 , 37 , 13 , Math. PI / 7 , -Math. PI / seven , faux ) ; ctx. lineTo ( 31 , 37 ) ; ctx. fill ( ) ; for ( var i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * 16 , 35 , four , 4 ) ; } for (i = 0 ; i < half-dozen ; i++ ) { ctx. fillRect ( 115 , 51 + i * 16 , 4 , 4 ) ; } for (i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * 16 , 99 , iv , 4 ) ; } ctx. beginPath ( ) ; ctx. moveTo ( 83 , 116 ) ; ctx. lineTo ( 83 , 102 ) ; ctx. bezierCurveTo ( 83 , 94 , 89 , 88 , 97 , 88 ) ; ctx. bezierCurveTo ( 105 , 88 , 111 , 94 , 111 , 102 ) ; ctx. lineTo ( 111 , 116 ) ; ctx. lineTo ( 106.333 , 111.333 ) ; ctx. lineTo ( 101.666 , 116 ) ; ctx. lineTo ( 97 , 111.333 ) ; ctx. lineTo ( 92.333 , 116 ) ; ctx. lineTo ( 87.666 , 111.333 ) ; ctx. lineTo ( 83 , 116 ) ; ctx. fill ( ) ; ctx.fillStyle = 'white' ; ctx. beginPath ( ) ; ctx. moveTo ( 91 , 96 ) ; ctx. bezierCurveTo ( 88 , 96 , 87 , 99 , 87 , 101 ) ; ctx. bezierCurveTo ( 87 , 103 , 88 , 106 , 91 , 106 ) ; ctx. bezierCurveTo ( 94 , 106 , 95 , 103 , 95 , 101 ) ; ctx. bezierCurveTo ( 95 , 99 , 94 , 96 , 91 , 96 ) ; ctx. moveTo ( 103 , 96 ) ; ctx. bezierCurveTo ( 100 , 96 , 99 , 99 , 99 , 101 ) ; ctx. bezierCurveTo ( 99 , 103 , 100 , 106 , 103 , 106 ) ; ctx. bezierCurveTo ( 106 , 106 , 107 , 103 , 107 , 101 ) ; ctx. bezierCurveTo ( 107 , 99 , 106 , 96 , 103 , 96 ) ; ctx. make full ( ) ; ctx.fillStyle = 'black' ; ctx. beginPath ( ) ; ctx. arc ( 101 , 102 , 2 , 0 , Math. PI * two , true ) ; ctx. fill up ( ) ; ctx. beginPath ( ) ; ctx. arc ( 89 , 102 , ii , 0 , Math. PI * 2 , true ) ; ctx. make full ( ) ; } } // A utility office to depict a rectangle with rounded corners. office roundedRect ( ctx, x, y, width, elevation, radius ) { ctx. beginPath ( ) ; ctx. moveTo (x, y + radius) ; ctx. arcTo (10, y + height, 10 + radius, y + height, radius) ; ctx. arcTo (10 + width, y + height, x + width, y + top - radius, radius) ; ctx. arcTo (10 + width, y, ten + width - radius, y, radius) ; ctx. arcTo (x, y, x, y + radius, radius) ; ctx. stroke ( ) ; } The resulting image looks similar this:
We won't go over this in detail, since it's actually surprisingly elementary. The virtually important things to annotation are the use of the fillStyle property on the drawing context, and the employ of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code yous demand, also equally its complication.
We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill up color for paths from the default color of black to white, then back again.
Path2D objects
Equally nosotros take seen in the last instance, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets yous cache or record these drawing commands. You are able to play back your paths quickly. Let's see how we can construct a Path2D object:
-
Path2D() -
The
Path2D()constructor returns a newly instantiatedPath2Dobject, optionally with another path as an argument (creates a copy), or optionally with a cord consisting of SVG path data.
new Path2D ( ) ; // empty path object new Path2D (path) ; // copy from another Path2D object new Path2D (d) ; // path from SVG path data All path methods similar moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are available on Path2D objects.
The Path2D API also adds a way to combine paths using the addPath method. This tin be useful when y'all desire to build objects from several components, for example.
-
Path2D.addPath(path [, transform]) -
Adds a path to the current path with an optional transformation matrix.
Path2D example
In this example, nosotros are creating a rectangle and a circle. Both are stored as a Path2D object, then that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to employ instead of the current path. Hither, stroke and fill are used with a path argument to describe both objects onto the canvass, for example.
function describe ( ) { var sail = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2nd' ) ; var rectangle = new Path2D ( ) ; rectangle. rect ( ten , ten , fifty , l ) ; var circle = new Path2D ( ) ; circumvolve. arc ( 100 , 35 , 25 , 0 , ii * Math. PI ) ; ctx. stroke (rectangle) ; ctx. fill (circle) ; } } Using SVG paths
Another powerful feature of the new canvas Path2D API is using SVG path data to initialize paths on your canvas. This might allow you to laissez passer effectually path data and re-use them in both, SVG and sheet.
The path will move to point (M10 x) so move horizontally 80 points to the right (h 80), then 80 points downwardly (v lxxx), then eighty points to the left (h -lxxx), and then back to the kickoff (z). You lot can see this example on the Path2D constructor folio.
var p = new Path2D ( 'M10 10 h lxxx five lxxx h -80 Z' ) ; - « Previous
- Next »
Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
0 Response to "Draw Circle on Canvas Html Javascript"
Post a Comment