Drawing Tool That Generates Div Coordinates
Lottery shapes with study
- « Previous
- Next »
In real time that we have set awake our canvas surroundings, we can get in the inside information of how to draw on the canvas. By the end of this article, you will have learned how to get rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the study and we volition see how that can be done.
The reference grid
Before we can start drawing, we require to talk of the canvas grid OR coordinate quad. Our HTML skeleton from the early page had a canvass fabric chemical element 150 pixels wide-eyed and 150 pixels high.
Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The ancestry of this power system is positioned in the top left field turning point at organise (0,0). All elements are placed relative to this origin. So the position of the top left quoin of the blueness square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Afterwards in this instructor we'll see how we can translate the descent to a different position, rotate the grid and even scale information technology, simply for now we'll hold fast the default.
Drawing rectangles
Unlike SVG, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). Every other shapes mustiness be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make it realizable to compose very complex shapes.
First let's view the rectangle. In that respect are three functions that take up rectangles connected the canvas:
-
fillRect(x, y, width, height) -
Draws a full rectangle.
-
strokeRect(x, y, width, height) -
Draws a perpendicular outline.
-
clearRect(x, y, width, stature) -
Clears the specified rectangular area, qualification it fully transparent.
Each of these three functions takes the identical parameters. x and y specify the position on the canvas (relative to the origin) of the top-left tree of the rectangle. width and height provide the rectangle's size.
Below is the draw() go from the previous page, but now information technology is making use of these three functions.
Orthogonal shape example
office attracter ( ) { volt-ampere canvas = document. getElementById ( 'canvas' ) ; if (poll.getContext) { volt-ampere ctx = canvas. getContext ( '2d' ) ; ctx. fillRect ( 25 , 25 , 100 , 100 ) ; ctx. clearRect ( 45 , 45 , 60 , 60 ) ; ctx. strokeRect ( 50 , 50 , 50 , 50 ) ; } } This example's output is shown down the stairs.
| Screenshot | Live sample |
|---|---|
 |
The fillRect() procedure draws a large black square 100 pixels happening each side. The clearRect() function then erases a 60x60 pel square from the center, and then strokeRect() is called to create a rectangular outline 50x50 pixels inside the clear-cut square.
In upcoming pages we'll see 2 alternative methods for clearRect(), and we'll as wel see how to change the color and stroke mode of the rendered shapes.
Unlike the path functions we'll see in the adjacent section, complete three rectangle functions run immediately to the study.
Drawing paths
Now let's look at paths. A path is a list of points, adjoining by segments of lines that can buoy be of divergent shapes, curvilineal or not, of unusual breadth and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we accept some extra stairs:
- First, you create the path.
- And then you use draft commands to draw into the route.
- Once the path has been created, you can slash or fill the path to render IT.
Hither are the functions used to execute these steps:
-
beginPath() -
Creates a new path. Once created, future drawing commands are directed into the itinerary and used to build the path up.
- Path methods
-
Methods to set down different paths for objects.
-
closePath() -
Adds a straight line to the way of life, expiration to the begin of the current sub-route.
-
stroke() -
Draws the shape by stroking its outline.
-
fill() -
Draws a solid physical body by filling the path's content arena.
The first step to produce a path is to call the beginPath(). Internally, paths are stored as a list of hoagie-paths (lines, arcs, etc) which conjointly chassis a shape. Every clip this method is called, the list is readjust and we can start drawing new shapes.
Note: When the current path is empty, such as right away aft calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it in reality is. For that reason out, you will almost always want to specifically set your starting position afterward resetting a path.
The forward dance step is calling the methods that actually specify the paths to be raddled. We'll see these in short.
The third, and an ex gratia step, is to holler closePath(). This method acting tries to close the shape past drawing a straight line from the latest point to the start. If the shape has already been closed operating room there's only one head in the inclination, this function does nothing.
Bank bill: When you call occupy(), any agaze shapes are closed automatically, indeed you don't deliver to bid closePath(). This is not the case when you call stroke().
Draught a triangle
For example, the code for drawing a triangle would smel something care this:
mathematical function draw ( ) { var canvass = document. getElementById ( 'canvass fabric' ) ; 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:
| Screenshot | Live sample |
|---|---|
 |
Riding the compose
One same useful function, which doesn't actually draw up anything but becomes part of the path list delineate preceding, is the moveTo() use. You can in all probability best hatch this American Samoa lifting a pen or pencil from one spot on a piece of wallpaper and placing it on the incoming.
-
moveTo(x, y) -
Moves the pen to the coordinates specified by
xandy.
When the canvas is initialized surgery beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere other. We could also use moveTo() to draw unconnected paths. Pick out a wait at the smiley face below.
To hear this for yourself, you keister use the code snippet to a lower place. Fair paste it into the draw() function we power saw earlier.
function draw ( ) { volt-ampere canvas = document. getElementById ( 'canvas' ) ; if (examine.getContext) { var ctx = canvas. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. arc ( 75 , 75 , 50 , 0 , Mathematics. PI * 2 , true ) ; // Outer ring ctx. moveTo ( 110 , 75 ) ; ctx. arc ( 75 , 75 , 35 , 0 , Math. PI , false ) ; // Lip (clockwise) ctx. moveTo ( 65 , 65 ) ; ctx. arc ( 60 , 65 , 5 , 0 , Math. PI * 2 , true ) ; // Larboard center ctx. moveTo ( 95 , 65 ) ; ctx. arc ( 90 , 65 , 5 , 0 , Math. PI * 2 , true ) ; // Right eyeball ctx. shot ( ) ; } } The result looks like this:
| Screenshot | Live sample |
|---|---|
 |
If you'd like-minded to see the connecting lines, you can transfer the lines that call moveTo().
Note: To learn more about the arc() role, get a line the Arcs part below.
Lines
For drawing straight lines, use the lineTo() method acting.
-
lineTo(x, 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 steer. The terminus a quo is depending on antecedently worn paths, where the end point of the former path is the terminus a quo for the shadowing, etc. The terminus a quo can also cost varied by using the moveTo() method acting.
The example below draws two triangles, one filled and one defined.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas fabric.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 aside career beginPath() to start a new shape path. We then function the moveTo() method to affect the terminus a quo to the desired position. Below this, two lines are drawn which make water up two sides of the trilateral.
| Screenshot | Live sample |
|---|---|
 |
You'll notice the dispute between the full and stroked Triangulum. This is, as mentioned above, because shapes are mechanically 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 have been closed, non a full-scale triangle.
Arcs
To sop up arcs Oregon circles, we use the arc() Beaver State arcTo() methods.
-
arc(x, y, radius, startAngle, endAngle, counterclockwise) -
Draws an arc which is centered at (x, y) position with wheel spoke r protrusive at startAngle and conclusion at endAngle going in the given focus indicated by contraclockwise (defaulting to clockwise).
-
arcTo(x1, y1, x2, y2, radius) -
Draws an arc with the bestowed control points and radius, connected to the previous point by a straight line.
Rent's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the R-2 on which the arc should be drawn. radius is self-instructive. The startAngle and endAngle parameters specify the start and end points of the electric arc in radians, along the curve of the circle. These are careful from the x axis. The levorotary parameter is a Boolean value which, when faithful, draws the arc counterclockwise; differently, the arc is drawn clockwise.
Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you crapper use the following JavaScript look: radians = (Maths.Private eye/180)*degrees.
The following example is a little many compound 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 bow, we start a refreshing path past calling beginPath(). In the codification, all of the parameters for the arc is in a variable for uncloudedness, but you wouldn't necessarily do that in real life.
The x and y coordinates should be clear sufficient. radius and startAngle are unchangeable. The endAngle starts at 180 degrees (one-half a circle) in the first column and is accumulated by stairs of 90 degrees, culminating in a complete circle in the last column.
The statement for the clockwise parametric quantity results in the first and thirdly wrangle being drawn as clockwise arcs and the second and fourthly row as counterclockwise arcs. Finally, the if statement makes the round top half stroked arcs and the bottom half filled arcs.
Remark: This case requires a slimly large canvas than the others connected this Page: 150 x 200 pixels.
function get ( ) { volt-ampere canvas fabric = written document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; for ( var i = 0 ; i < 4 ; i++ ) { for ( var j = 0 ; j < 3 ; j++ ) { ctx. beginPath ( ) ; var x = 25 + j * 50 ; // x coordinate var y = 25 + i * 50 ; // y coordinate volt-ampere radius = 20 ; // Electric arc radius volt-ampere startAngle = 0 ; // Starting point on circle var endAngle = Maths. PI + (Math. PI * j) / 2 ; // Oddment point on circle var levorotary = i % 2 !== 0 ; // clockwise or counterclockwise ctx. electric arc (x, y, wheel spoke, startAngle, endAngle, counterclockwise) ; if (i > 1 ) { ctx. fill ( ) ; } else { ctx. stroke ( ) ; } } } } } | Screenshot | Live sample distribution |
|---|---|
 |
Bezier and quadratic curves
The adjacent type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally ill-used to draw complex organic fertilizer shapes.
-
quadraticCurveTo(cp1x, cp1y, x, y) -
Draws a quadratic Bézier curve from the prevailing pen position to the termination specified past
xandy, exploitation the control spot specified bycp1xandcp1y. -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -
Draws a cubic Bézier curve from the current pen position to the end point 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 start and an end point (blue dots) and sporty matchless control point (indicated by the red dot) while a cubic Bézier cut uses two ascendence points. 
The x and y parameters in some of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the back master point.
Victimisation quadratic and cubic Bézier curves can be quite challenging, because dissimilar vector draught software like Adobe Illustrator, we don't cause direct seeable feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the undermentioned example, we'll be drawing some simple organic shapes, but if you take in the time and, most of completely, the patience, much more complex shapes can represent created.
There's nothing very difficult in these examples. In some cases we hear a succession of curves organism drawn which in conclusion result in a complete shape.
Quadratic Bezier curves
This example uses multiple quadratic Bézier curves to hand over a speech balloon.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = analyse. getContext ( '2d' ) ; // Quadratric curves instance ctx. beginPath ( ) ; ctx. moveTo ( 75 , 25 ) ; ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.5 ) ; 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 ( ) ; } } | Screenshot | Live try out |
|---|---|
 |
Cubic Bezier curves
This example draws a affection exploitation cubic Bézier curves.
procedure draw ( ) { volt-ampere canvas = text file. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvass fabric. getContext ( '2d' ) ; // Cubic curves example ctx. beginPath ( ) ; ctx. moveTo ( 75 , 40 ) ; ctx. bezierCurveTo ( 75 , 37 , 70 , 25 , 50 , 25 ) ; ctx. bezierCurveTo ( 20 , 25 , 20 , 62.5 , 20 , 62.5 ) ; ctx. bezierCurveTo ( 20 , 80 , 40 , 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 , 40 ) ; ctx. fill ( ) ; } } | Screenshot | Hold ou sampling |
|---|---|
 |
Rectangles
In plus to the 3 methods we sawing machine in Drawing rectangles, which draw rectangular shapes straight off to the sheet, there's also the rect() method, which adds a rectangular path to a currently open path.
-
rect(x, y, width, height) -
Draws a rectangle whose teetotum-left corner is specified by (
x,y) with the specifiedwidthandheight.
Ahead this method is executed, the moveTo() method acting is automatically called with the parameters (x,y). Put differently, the current pen put off is automatically reset to the default coordinates.
Making combinations
So far, each example on this page has used only one type of path operate per pattern. However, in that respect's nary limitation to the number OR types of paths you seat use to create a frame. So in that final example, let's combine all of the path functions to make a set of very famed game characters.
function trace ( ) { var canvas = document. getElementById ( 'analyze' ) ; 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 , 16 , 6 ) ; roundedRect (ctx, 135 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 135 , 119 , 25 , 49 , 10 ) ; ctx. beginPath ( ) ; ctx. arc ( 37 , 37 , 13 , Maths. Private eye / 7 , -Math. Operative / 7 , false ) ; ctx. lineTo ( 31 , 37 ) ; ctx. fill ( ) ; for ( var i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * 16 , 35 , 4 , 4 ) ; } for (i = 0 ; i < 6 ; i++ ) { ctx. fillRect ( 115 , 51 + i * 16 , 4 , 4 ) ; } for (i = 0 ; i < 8 ; 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 up ( ) ; 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. spark ( 101 , 102 , 2 , 0 , Maths. PI * 2 , trusty ) ; ctx. occupy ( ) ; ctx. beginPath ( ) ; ctx. arc ( 89 , 102 , 2 , 0 , Mathematics. PI * 2 , true ) ; ctx. fill ( ) ; } } // A utility function to draw a rectangle with ringed corners. function roundedRect ( ctx, x, y, width, elevation, r ) { ctx. beginPath ( ) ; ctx. moveTo (x, y + spoke) ; ctx. arcTo (x, y + height, x + radius, y + height, radius) ; ctx. arcTo (x + width, y + elevation, x + width, y + height - radius, r) ; ctx. arcTo (x + width, y, x + width - radius, y, radius) ; ctx. arcTo (x, y, x, y + radius, radius) ; ctx. stroke ( ) ; } The resulting image looks like this:
| Screenshot | Hold up sample |
|---|---|
 |
We won't go over this in detail, since it's actually surprisingly linear. The most alpha things to note are the use of the fillStyle property along the drawing off context, and the use of a utility-grade function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and cut back the amount of code you need, too as its complexity.
We'll remove another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill colorise for paths from the nonpayment color of black to white, and then plunk for again.
Path2D objects
Atomic number 3 we have seen in the parting example, there can be a serial publication of paths and draft commands to draw objects onto your sail. To simplify the inscribe and to improve performance, the Path2D object, accessible in recent versions of browsers, lets you cache or disk these drawing commands. You are able to play back your paths rapidly. Lashkar-e-Tayyiba's see how we can construct a Path2D targe:
-
Path2D() -
The
Path2D()builder returns a fresh instantiatedPath2Dobject, optionally with some other path equally an disceptation (creates a copy), or optionally with a string consisting of SVG path data.
novel Path2D ( ) ; // glassy path object new Path2D (path) ; // copy from some other Path2D aim new Path2D (d) ; // course from SVG path data Wholly way methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are on tap on Path2D objects.
The Path2D API also adds a path to combine paths using the addPath method. This can be useful when you want to build objects from various components, for example.
-
Path2D.addPath(path [, transmute]) -
Adds a path to the present-day way of life with an optional shift matrix.
Path2D example
In this example, we are creating a rectangle and a circle. Some are stored as a Path2D object, so that they are available for subsequently usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the up-to-date path. Here, slash and meet are used with a path argument to draw both objects onto the canvas, for example.
use draw ( ) { var canvas = document. getElementById ( 'sheet' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; volt-ampere rectangle = parvenu Path2D ( ) ; rectangle. rect ( 10 , 10 , 50 , 50 ) ; var circle = new Path2D ( ) ; circle. bow ( 100 , 35 , 25 , 0 , 2 * Math. PI ) ; ctx. stroke (rectangle) ; ctx. filling (circle) ; } } | Screenshot | Live try |
|---|---|
 |
Using SVG paths
Another powerful feature of the new canvas Path2D API is exploitation SVG path data to initialize paths on your canvas. This mightiness allow for you to pass on path data and re-use them in both, SVG and canvas.
The path will move to point (M10 10) and then impress horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then dorsum to the start (z). You rear end see this example on the Path2D builder page.
var p = new Path2D ( 'M10 10 h 80 v 80 h -80 Z' ) ; - « Former
- Following »
Drawing Tool That Generates Div Coordinates
Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
0 Response to "Drawing Tool That Generates Div Coordinates"
Post a Comment