Canvas Draw Circle on Click
Drawing shapes with canvas
- « Previous
- Next »
Now that we have set up our canvas environment, we can get into the details of how to draw on the canvas. By the end of this commodity, yous will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvass and we will run across how that tin can be done.
The filigree
Before nosotros can start drawing, nosotros need to talk well-nigh the canvas grid or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.
Normally 1 unit in the filigree corresponds to 1 pixel on the canvas. 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 pinnacle left corner of the bluish square becomes x pixels from the left and y pixels from the elevation, at coordinate (x,y). Afterward in this tutorial we'll run across how nosotros tin 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, <sheet> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). All other shapes must exist created by combining one or more paths. Luckily, we have an assortment of path drawing functions which get in possible to compose very circuitous shapes.
Commencement permit'southward look at the rectangle. At that place are iii functions that depict rectangles on the canvas:
-
fillRect(x, y, width, height) -
Draws a filled rectangle.
-
strokeRect(x, y, width, peak) -
Draws a rectangular outline.
-
clearRect(ten, y, width, peak) -
Clears the specified rectangular expanse, making it fully transparent.
Each of these iii functions takes the same parameters. ten and y specify the position on the canvass (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle'south size.
Below is the depict() office from the previous page, but now information technology is making use of these three functions.
Rectangular shape example
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( 'second' ) ; ctx. fillRect ( 25 , 25 , 100 , 100 ) ; ctx. clearRect ( 45 , 45 , 60 , 60 ) ; ctx. strokeRect ( 50 , l , 50 , 50 ) ; } } This example's output is shown below.
The fillRect() function draws a large black square 100 pixels on each side. The clearRect() role then erases a 60x60 pixel square from the eye, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.
In upcoming pages we'll see two alternative methods for clearRect(), and nosotros'll also see how to change the color and stroke fashion of the rendered shapes.
Unlike the path functions we'll encounter in the next section, all 3 rectangle functions draw immediately to the canvas.
Drawing paths
Now let'south look at paths. A path is a list of points, connected past segments of lines that can be of dissimilar shapes, curved or non, of different width and of different colour. A path, or even a subpath, can be closed. To make shapes using paths, nosotros take some extra steps:
- First, you create the path.
- Then you lot apply drawing commands to draw into the path.
- Once the path has been created, you lot can stroke or make full the path to render it.
Here are the functions used to perform these steps:
-
beginPath() -
Creates a new path. One time created, futurity drawing commands are directed into the path and used to build the path up.
- Path methods
-
Methods to set different paths for objects.
-
closePath() -
Adds a straight line to the path, going to the start of the current sub-path.
-
stroke() -
Draws the shape by stroking its outline.
-
fill up() -
Draws a solid shape past filling the path's content area.
The first footstep to create a path is to 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 we can start drawing new shapes.
Annotation: When the current path is empty, such as immediately later calling beginPath(), or on a newly created canvas, the beginning path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.
The second step is calling the methods that actually specify the paths to be fatigued. We'll see these soon.
The third, and an optional step, is to call closePath(). This method tries to shut the shape by drawing a straight line from the current point to the offset. If the shape has already been closed or at that place's only i point in the list, this function does nothing.
Note: When yous phone call fill up(), any open up shapes are airtight automatically, so you don't take to call closePath(). This is non the example when you lot call stroke().
Drawing a triangle
For example, the lawmaking for drawing a triangle would look something like this:
function depict ( ) { var canvass = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2nd' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 75 , 50 ) ; ctx. lineTo ( 100 , 75 ) ; ctx. lineTo ( 100 , 25 ) ; ctx. fill ( ) ; } } The result looks like this:
Moving the pen
One very useful role, which doesn't really draw anything but becomes function of the path list described above, is the moveTo() part. You can probably best remember of this equally lifting a pen or pencil from one spot on a piece of newspaper and placing information technology on the next.
-
moveTo(x, y) -
Moves the pen to the coordinates specified by
tenandy.
When the canvass is initialized or beginPath() is called, yous typically will desire to use the moveTo() role to identify the starting point somewhere else. We could also use moveTo() to draw unconnected paths. Take a look at the smiley face beneath.
To endeavour this for yourself, you can apply the code snippet beneath. Just paste information technology into the describe() function we saw earlier.
office draw ( ) { var canvas = document. getElementById ( 'canvass' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( 'second' ) ; ctx. beginPath ( ) ; ctx. arc ( 75 , 75 , 50 , 0 , Math. PI * two , truthful ) ; // Outer circumvolve ctx. moveTo ( 110 , 75 ) ; ctx. arc ( 75 , 75 , 35 , 0 , Math. PI , false ) ; // Oral cavity (clockwise) ctx. moveTo ( 65 , 65 ) ; ctx. arc ( threescore , 65 , v , 0 , Math. PI * 2 , true ) ; // Left eye ctx. moveTo ( 95 , 65 ) ; ctx. arc ( ninety , 65 , five , 0 , Math. PI * two , truthful ) ; // Right eye ctx. stroke ( ) ; } } The result looks like this:
If you'd like to see the connecting lines, you can remove the lines that call moveTo().
Annotation: To learn more than about the arc() role, run across the Arcs section below.
Lines
For drawing straight lines, employ the lineTo() method.
-
lineTo(ten, y) -
Draws a line from the current drawing position to the position specified past
xandy.
This method takes two arguments, x and y, which are the coordinates of the line's end point. The starting betoken is dependent on previously drawn paths, where the stop indicate of the previous path is the starting betoken for the following, etc. The starting bespeak tin can as well be changed past using the moveTo() method.
The example below draws two triangles, 1 filled and one outlined.
function depict ( ) { var sheet = document. getElementById ( 'sheet' ) ; if (canvass.getContext) { var ctx = sheet. getContext ( '2d' ) ; // Filled triangle ctx. beginPath ( ) ; ctx. moveTo ( 25 , 25 ) ; ctx. lineTo ( 105 , 25 ) ; ctx. lineTo ( 25 , 105 ) ; ctx. fill up ( ) ; // Stroked triangle ctx. beginPath ( ) ; ctx. moveTo ( 125 , 125 ) ; ctx. lineTo ( 125 , 45 ) ; ctx. lineTo ( 45 , 125 ) ; ctx. closePath ( ) ; ctx. stroke ( ) ; } } This starts by calling beginPath() to commencement a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, 2 lines are drawn which make up two sides of the triangle.
You'll find the deviation between the filled and stroked triangle. This is, equally mentioned above, considering shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would take been drawn, not a complete 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 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, connected to the previous point past a straight line.
Let's accept a more than detailed await at the arc method, which takes half-dozen parameters: ten and y are the coordinates of the middle of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the starting time and stop 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 drawn clockwise.
Annotation: Angles in the arc role are measured in radians, not degrees. To convert degrees to radians you tin utilize the following JavaScript expression: radians = (Math.PI/180)*degrees.
The following case is a trivial more circuitous than the ones we've seen above. It draws 12 different arcs all with different angles and fills.
The two for loops are for looping through the rows and columns of arcs. For each arc, we beginning a new path past 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 x and y coordinates should be clear enough. radius and startAngle are stock-still. The endAngle starts at 180 degrees (half a circumvolve) in the first column and is increased by steps of xc degrees, culminating in a complete circumvolve in the last column.
The statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top one-half stroked arcs and the bottom half filled arcs.
Note: This case requires a slightly larger canvas than the others on this page: 150 x 200 pixels.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (sheet.getContext) { var ctx = sail. getContext ( '2d' ) ; for ( var i = 0 ; i < 4 ; i++ ) { for ( var j = 0 ; j < 3 ; j++ ) { ctx. beginPath ( ) ; var 10 = 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 ; // Stop bespeak on circumvolve var counterclockwise = i % 2 !== 0 ; // clockwise or counterclockwise ctx. arc (x, y, radius, startAngle, endAngle, counterclockwise) ; if (i > 1 ) { ctx. fill up ( ) ; } 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 more often than not used to draw circuitous organic shapes.
-
quadraticCurveTo(cp1x, cp1y, ten, y) -
Draws a quadratic Bézier curve from the current pen position to the end indicate specified by
10andy, using the control point specified bycp1xandcp1y. -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -
Draws a cubic Bézier curve from the current pen position to the cease point specified past
xandy, using the control points specified by (cp1x,cp1y) and (cp2x, cp2y).
The deviation between these is that a quadratic Bézier curve has a commencement and an end bespeak (blueish dots) and only one control signal (indicated by the blood-red dot) while a cubic Bézier curve uses two control points. 
The 10 and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control betoken, and cp2x and cp2y are the coordinates of the 2nd control bespeak.
Using quadratic and cubic Bézier curves can exist quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have straight visual feedback as to what we're doing. This makes information technology pretty hard to draw circuitous shapes. In the following example, we'll be drawing some unproblematic organic shapes, but if you take the fourth dimension and, most of all, the patience, much more complex shapes can be created.
There's nothing very difficult in these examples. In both cases we meet a succession of curves being drawn which finally issue in a complete shape.
Quadratic Bezier curves
This example uses multiple quadratic Bézier curves to render a speech balloon.
part draw ( ) { var sheet = document. getElementById ( 'canvass' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; // Quadratic curves example ctx. beginPath ( ) ; ctx. moveTo ( 75 , 25 ) ; ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.5 ) ; ctx. quadraticCurveTo ( 25 , 100 , l , 100 ) ; ctx. quadraticCurveTo ( 50 , 120 , thirty , 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 case draws a heart using cubic Bézier curves.
part draw ( ) { var canvas = document. getElementById ( 'sail' ) ; if (sail.getContext) { var ctx = sheet. getContext ( 'second' ) ; // Cubic curves example ctx. beginPath ( ) ; ctx. moveTo ( 75 , 40 ) ; ctx. bezierCurveTo ( 75 , 37 , 70 , 25 , 50 , 25 ) ; ctx. bezierCurveTo ( twenty , 25 , 20 , 62.5 , twenty , 62.5 ) ; ctx. bezierCurveTo ( 20 , 80 , forty , 102 , 75 , 120 ) ; ctx. bezierCurveTo ( 110 , 102 , 130 , 80 , 130 , 62.5 ) ; ctx. bezierCurveTo ( 130 , 62.5 , 130 , 25 , 100 , 25 ) ; ctx. bezierCurveTo ( 85 , 25 , 75 , 37 , 75 , xl ) ; ctx. fill ( ) ; } } Rectangles
In addition to the iii methods we saw in Cartoon rectangles, which describe rectangular shapes directly to the canvas, there'southward also the rect() method, which adds a rectangular path to a currently open path.
-
rect(10, y, width, height) -
Draws a rectangle whose peak-left corner is specified by (
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
And then far, each example on this page has used just 1 type of path office per shape. Withal, there's no limitation to the number or types of paths you can employ to create a shape. And so in this concluding example, allow'due south combine all of the path functions to make a set of very famous game characters.
function draw ( ) { var canvass = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; roundedRect (ctx, 12 , 12 , 150 , 150 , 15 ) ; roundedRect (ctx, 19 , 19 , 150 , 150 , 9 ) ; roundedRect (ctx, 53 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 53 , 119 , 49 , xvi , vi ) ; roundedRect (ctx, 135 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 135 , 119 , 25 , 49 , 10 ) ; ctx. beginPath ( ) ; ctx. arc ( 37 , 37 , thirteen , Math. PI / seven , -Math. PI / seven , false ) ; ctx. lineTo ( 31 , 37 ) ; ctx. make full ( ) ; for ( var i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * xvi , 35 , 4 , 4 ) ; } for (i = 0 ; i < vi ; i++ ) { ctx. fillRect ( 115 , 51 + i * 16 , 4 , iv ) ; } for (i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * xvi , 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 = 'blackness' ; 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 * ii , true ) ; ctx. fill ( ) ; } } // A utility function to draw a rectangle with rounded corners. function roundedRect ( ctx, x, y, width, height, radius ) { ctx. beginPath ( ) ; ctx. moveTo (10, y + radius) ; ctx. arcTo (x, y + height, x + radius, y + height, radius) ; ctx. arcTo (10 + width, y + height, x + width, y + top - radius, radius) ; ctx. arcTo (x + width, y, x + width - radius, y, radius) ; ctx. arcTo (ten, y, x, y + radius, radius) ; ctx. stroke ( ) ; } The resulting image looks like this:
We won't go over this in detail, since it'southward really surprisingly simple. The nigh important things to note are the use of the fillStyle property on the drawing context, and the utilize of a utility function (in this case roundedRect()). Using utility functions for $.25 of cartoon y'all do often tin exist very helpful and reduce the amount of lawmaking y'all need, as well as its complexity.
Nosotros'll take some other look at fillStyle, in more particular, later on in this tutorial. Here, all we're doing is using it to change the make full color for paths from the default color of blackness to white, so dorsum again.
Path2D objects
Every bit we have seen in the last instance, in that location tin can exist a series of paths and drawing commands to draw objects onto your canvas. To simplify the lawmaking and to better performance, the Path2D object, bachelor in recent versions of browsers, lets you cache or record these drawing commands. Yous are able to play back your paths quickly. Allow's see how we can construct a Path2D object:
-
Path2D() -
The
Path2D()constructor returns a newly instantiatedPath2Dobject, optionally with another path as an statement (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 bachelor on Path2D objects.
The Path2D API also adds a way to combine paths using the addPath method. This can exist useful when you want 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, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally have a Path2D object to use instead of the current path. Here, stroke and make full are used with a path statement to describe both objects onto the canvas, for example.
office draw ( ) { var sheet = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = sheet. getContext ( '2d' ) ; var rectangle = new Path2D ( ) ; rectangle. rect ( ten , 10 , 50 , 50 ) ; var circle = new Path2D ( ) ; circle. arc ( 100 , 35 , 25 , 0 , two * Math. PI ) ; ctx. stroke (rectangle) ; ctx. fill (circle) ; } } Using SVG paths
Another powerful feature of the new sail Path2D API is using SVG path data to initialize paths on your canvas. This might allow you lot to pass around path data and re-use them in both, SVG and canvas.
The path will move to point (M10 ten) and so move horizontally 80 points to the right (h 80), then 80 points down (v 80), then lxxx points to the left (h -80), and and so back to the start (z). You can see this case on the Path2D constructor page.
var p = new Path2D ( 'M10 10 h 80 v eighty h -lxxx Z' ) ; - « Previous
- Adjacent »
Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
0 Response to "Canvas Draw Circle on Click"
Post a Comment