Draw Circle With Canvas Tag
Drawing shapes with canvas
- « Previous
- Next »
Now that we take set upward our canvass environment, we can get into the details of how to draw on the canvas. Past the end of this article, you will have learned how to depict rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when cartoon objects onto the sheet and we will see how that can be done.
The grid
Before we can offset cartoon, we demand to talk nigh the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvas element 150 pixels broad and 150 pixels high.
Commonly 1 unit in the filigree corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. And so the position of the top left corner of the blue foursquare becomes x pixels from the left and y pixels from the summit, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a dissimilar position, rotate the filigree and even scale it, but for now we'll stick to the default.
Drawing rectangles
Unlike SVG, <canvass> only supports two primitive shapes: rectangles and paths (lists of points continued by lines). All other shapes must be created past combining one or more paths. Luckily, we have an array of path drawing functions which brand it possible to compose very complex shapes.
First let's expect at the rectangle. There are iii functions that draw rectangles on the sail:
-
fillRect(10, y, width, acme) -
Draws a filled rectangle.
-
strokeRect(x, y, width, height) -
Draws a rectangular outline.
-
clearRect(x, y, width, elevation) -
Clears the specified rectangular expanse, making it fully transparent.
Each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the superlative-left corner of the rectangle. width and superlative provide the rectangle'south size.
Beneath is the depict() function from the previous page, but at present it is making utilize of these three functions.
Rectangular shape example
office draw ( ) { var canvas = document. getElementById ( 'sheet' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; ctx. fillRect ( 25 , 25 , 100 , 100 ) ; ctx. clearRect ( 45 , 45 , threescore , sixty ) ; ctx. strokeRect ( 50 , 50 , 50 , 50 ) ; } } This example'southward output is shown beneath.
The fillRect() function draws a big black square 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the centre, and and then strokeRect() is chosen to create a rectangular outline 50x50 pixels within the cleared foursquare.
In upcoming pages we'll see ii alternative methods for clearRect(), and nosotros'll also see how to change the colour and stroke style of the rendered shapes.
Unlike the path functions we'll see in the side by side section, all three rectangle functions depict immediately to the sheet.
Drawing paths
Now allow's look at paths. A path is a listing of points, continued by segments of lines that tin can exist of different shapes, curved or not, of dissimilar width and of unlike color. A path, or even a subpath, can be closed. To brand shapes using paths, we take some extra steps:
- First, y'all create the path.
- Then you use drawing commands to draw into the path.
- Once the path has been created, you can stroke or fill the path to render it.
Here are the functions used to perform these steps:
-
beginPath() -
Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
- Path methods
-
Methods to set dissimilar paths for objects.
-
closePath() -
Adds a directly line to the path, going to the start of the electric current sub-path.
-
stroke() -
Draws the shape by stroking its outline.
-
fill() -
Draws a solid shape by filling the path'due south content area.
The kickoff step to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every fourth dimension this method is called, the list is reset and we can start drawing new shapes.
Annotation: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is ever treated as a moveTo(), regardless of what it actually is. For that reason, you volition almost e'er desire to specifically set up your starting position after resetting a path.
The 2d step is calling the methods that actually specify the paths to be drawn. We'll meet these shortly.
The third, and an optional stride, is to telephone call closePath(). This method tries to close the shape by drawing a straight line from the current point to the showtime. If the shape has already been closed or there'due south only one betoken in the list, this function does nothing.
Note: When you call fill(), whatever open shapes are closed automatically, and then you don't accept to call closePath(). This is not the instance when you call stroke().
Drawing a triangle
For example, the code for drawing a triangle would look something similar this:
function depict ( ) { var sheet = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 75 , 50 ) ; ctx. lineTo ( 100 , 75 ) ; ctx. lineTo ( 100 , 25 ) ; ctx. fill ( ) ; } } The result looks like this:
Moving the pen
Ane very useful function, which doesn't actually draw annihilation but becomes office of the path list described above, is the moveTo() function. You can probably best call back of this as lifting a pen or pencil from i spot on a piece of paper and placing information technology on the next.
-
moveTo(x, y) -
Moves the pen to the coordinates specified past
xandy.
When the canvas is initialized or beginPath() is chosen, you lot typically will desire to use the moveTo() function to identify the starting point somewhere else. Nosotros could also use moveTo() to depict unconnected paths. Take a look at the smiley face below.
To attempt this for yourself, you can use the code snippet beneath. Just paste it into the draw() function nosotros saw earlier.
function describe ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (sail.getContext) { var ctx = canvas. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. arc ( 75 , 75 , l , 0 , Math. PI * 2 , truthful ) ; // Outer circle ctx. moveTo ( 110 , 75 ) ; ctx. arc ( 75 , 75 , 35 , 0 , Math. PI , false ) ; // Mouth (clockwise) ctx. moveTo ( 65 , 65 ) ; ctx. arc ( 60 , 65 , 5 , 0 , Math. PI * 2 , true ) ; // Left eye ctx. moveTo ( 95 , 65 ) ; ctx. arc ( 90 , 65 , 5 , 0 , Math. PI * ii , true ) ; // Right centre ctx. stroke ( ) ; } } The result looks like this:
If you'd similar to see the connecting lines, you lot tin can remove the lines that telephone call moveTo().
Notation: To learn more about the arc() function, see the Arcs section beneath.
Lines
For cartoon directly lines, utilise the lineTo() method.
-
lineTo(ten, 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'southward end point. The starting point is dependent on previously drawn paths, where the end bespeak of the previous path is the starting point for the following, etc. The starting point tin also be inverse by using the moveTo() method.
The example below draws ii triangles, one filled and 1 outlined.
part depict ( ) { 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 get-go a new shape path. We then apply the moveTo() method to move the starting betoken to the desired position. Below this, two lines are drawn which make upwards two sides of the triangle.
You'll notice the difference between the filled and stroked triangle. This is, every bit mentioned above, because shapes are automatically airtight when a path is filled, only not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would accept been fatigued, not a consummate triangle.
Arcs
To draw arcs or circles, we use 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 catastrophe 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 command points and radius, continued to the previous point by a direct line.
Let'south have a more detailed look at the arc method, which takes 6 parameters: 10 and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the beginning and stop points of the arc in radians, along the curve of the circle. These are measured from the ten 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, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.
The following example is a little more circuitous than the ones we've seen above. It draws 12 unlike arcs all with different angles and fills.
The two for loops are for looping through the rows and columns of arcs. For each arc, nosotros 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 practise that in existent life.
The x and y coordinates should exist articulate plenty. radius and startAngle are fixed. The endAngle starts at 180 degrees (one-half a circle) in the first cavalcade 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 3rd row being drawn as clockwise arcs and the 2nd and fourth row every bit counterclockwise arcs. Finally, the if statement makes the peak one-half stroked arcs and the lesser half filled arcs.
Notation: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.
role depict ( ) { var sheet = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = sheet. getContext ( '2d' ) ; for ( var i = 0 ; i < 4 ; i++ ) { for ( var j = 0 ; j < 3 ; j++ ) { ctx. beginPath ( ) ; var ten = 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) / ii ; // End point on circle var counterclockwise = i % ii !== 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 side by side blazon of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to depict complex organic shapes.
-
quadraticCurveTo(cp1x, cp1y, x, y) -
Draws a quadratic Bézier curve from the current pen position to the end point specified by
xandy, using the command point specified bycp1xandcp1y. -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -
Draws a cubic Bézier curve from the current pen position to the stop indicate specified by
xandy, using the control points specified by (cp1x,cp1y) and (cp2x, cp2y).
The divergence between these is that a quadratic Bézier curve has a offset and an end indicate (blue dots) and simply i command point (indicated past the red dot) while a cubic Bézier bend uses 2 control points. 
The ten and y parameters in both of these methods are the coordinates of the terminate point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second command point.
Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, nosotros don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some elementary organic shapes, only if you have the fourth dimension and, virtually of all, the patience, much more complex shapes can be created.
There'southward nothing very hard in these examples. In both cases nosotros 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 speech balloon.
office draw ( ) { var canvass = certificate. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvass. getContext ( '2d' ) ; // Quadratic curves case ctx. beginPath ( ) ; ctx. moveTo ( 75 , 25 ) ; ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.5 ) ; ctx. quadraticCurveTo ( 25 , 100 , 50 , 100 ) ; ctx. quadraticCurveTo ( 50 , 120 , xxx , 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 instance draws a heart using cubic Bézier curves.
function depict ( ) { var canvass = document. getElementById ( 'sheet' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; // Cubic curves instance ctx. beginPath ( ) ; ctx. moveTo ( 75 , 40 ) ; ctx. bezierCurveTo ( 75 , 37 , 70 , 25 , 50 , 25 ) ; ctx. bezierCurveTo ( xx , 25 , 20 , 62.five , 20 , 62.five ) ; ctx. bezierCurveTo ( 20 , 80 , forty , 102 , 75 , 120 ) ; ctx. bezierCurveTo ( 110 , 102 , 130 , 80 , 130 , 62.5 ) ; ctx. bezierCurveTo ( 130 , 62.five , 130 , 25 , 100 , 25 ) ; ctx. bezierCurveTo ( 85 , 25 , 75 , 37 , 75 , forty ) ; ctx. fill ( ) ; } } Rectangles
In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes direct to the canvas, at that place'south also the rect() method, which adds a rectangular path to a currently open path.
-
rect(10, y, width, top) -
Draws a rectangle whose summit-left corner is specified past (
10,y) with the specifiedwidthandheight.
Before this method is executed, the moveTo() method is automatically called with the parameters (10,y). In other words, the current pen position is automatically reset to the default coordinates.
Making combinations
So far, each example on this page has used just ane blazon of path function per shape. Notwithstanding, there's no limitation to the number or types of paths yous can use to create a shape. So in this last example, let's combine all of the path functions to make a fix of very famous game characters.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvass.getContext) { var ctx = sail. getContext ( '2d' ) ; roundedRect (ctx, 12 , 12 , 150 , 150 , fifteen ) ; roundedRect (ctx, 19 , nineteen , 150 , 150 , nine ) ; roundedRect (ctx, 53 , 53 , 49 , 33 , ten ) ; roundedRect (ctx, 53 , 119 , 49 , 16 , 6 ) ; roundedRect (ctx, 135 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 135 , 119 , 25 , 49 , 10 ) ; ctx. beginPath ( ) ; ctx. arc ( 37 , 37 , 13 , Math. PI / seven , -Math. PI / 7 , false ) ; ctx. lineTo ( 31 , 37 ) ; ctx. fill up ( ) ; for ( var i = 0 ; i < viii ; i++ ) { ctx. fillRect ( 51 + i * sixteen , 35 , 4 , 4 ) ; } for (i = 0 ; i < 6 ; i++ ) { ctx. fillRect ( 115 , 51 + i * 16 , iv , 4 ) ; } for (i = 0 ; i < viii ; i++ ) { ctx. fillRect ( 51 + i * 16 , 99 , 4 , 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. fill ( ) ; ctx.fillStyle = 'black' ; ctx. beginPath ( ) ; ctx. arc ( 101 , 102 , two , 0 , Math. PI * 2 , true ) ; ctx. make full ( ) ; ctx. beginPath ( ) ; ctx. arc ( 89 , 102 , 2 , 0 , Math. PI * 2 , true ) ; ctx. fill ( ) ; } } // A utility role to draw a rectangle with rounded corners. function roundedRect ( ctx, x, y, width, peak, radius ) { ctx. beginPath ( ) ; ctx. moveTo (10, y + radius) ; ctx. arcTo (x, y + height, 10 + radius, y + top, radius) ; ctx. arcTo (x + width, y + height, ten + width, y + height - radius, radius) ; ctx. arcTo (x + width, y, ten + width - radius, y, radius) ; ctx. arcTo (ten, y, 10, y + radius, radius) ; ctx. stroke ( ) ; } The resulting image looks like this:
We won't go over this in detail, since it's really surprisingly simple. The almost important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this example roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of lawmaking you need, also as its complexity.
We'll take another look at fillStyle, in more particular, later in this tutorial. Here, all we're doing is using it to change the make full color for paths from the default colour of black to white, and and so dorsum once more.
Path2D objects
Equally we have seen in the last instance, there tin be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve functioning, the Path2D object, available in recent versions of browsers, lets you lot cache or tape these drawing commands. Yous are able to play back your paths quickly. Allow'due south see how we tin can construct a Path2D object:
-
Path2D() -
The
Path2D()constructor returns a newly instantiatedPath2Dobject, optionally with another path equally an argument (creates a copy), or optionally with a string consisting of SVG path data.
new Path2D ( ) ; // empty path object new Path2D (path) ; // re-create from another Path2D object new Path2D (d) ; // path from SVG path information All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are available on Path2D objects.
The Path2D API as well adds a style to combine paths using the addPath method. This can be useful when you desire to build objects from several components, for case.
-
Path2D.addPath(path [, transform]) -
Adds a path to the current path with an optional transformation matrix.
Path2D example
In this case, we are creating a rectangle and a circumvolve. Both are stored as a Path2D object, and so that they are available for later usage. With the new Path2D API, several methods got updated to optionally take a Path2D object to use instead of the current path. Here, stroke and make full are used with a path argument to describe both objects onto the canvas, for case.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = sail. getContext ( 'second' ) ; var rectangle = new Path2D ( ) ; rectangle. rect ( 10 , 10 , 50 , fifty ) ; var circle = new Path2D ( ) ; circumvolve. arc ( 100 , 35 , 25 , 0 , 2 * Math. PI ) ; ctx. stroke (rectangle) ; ctx. fill (circumvolve) ; } } 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 around path data and re-use them in both, SVG and canvas.
The path will motility to point (M10 10) then move horizontally eighty points to the right (h 80), and so 80 points down (v fourscore), so eighty points to the left (h -80), so back to the first (z). You can see this example on the Path2D constructor page.
var p = new Path2D ( 'M10 10 h 80 five 80 h -80 Z' ) ; - « Previous
- Next »
mcclearyroonstank.blogspot.com
Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
0 Response to "Draw Circle With Canvas Tag"
Post a Comment