Javascript Draw Many Circles Site Stackoverflow.com

Drawing shapes with sail

« Previous
Next »

Now that nosotros take set up our canvas environment, we tin can get into the details of how to draw on the canvas. By the end of this commodity, you will accept learned how to describe 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 see how that can be done.

The grid

Before we tin start cartoon, we demand to talk about the canvas filigree or coordinate space. Our HTML skeleton from the previous page had a canvass element 150 pixels wide and 150 pixels loftier.

Normally 1 unit in the grid corresponds to ane pixel on the canvas. The origin of this grid is positioned in the acme left corner at coordinate (0,0). All elements are placed relative to this origin. 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 (ten,y). Later in this tutorial nosotros'll see how we tin interpret the origin to a different position, rotate the grid and even scale it, simply for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports two archaic shapes: rectangles and paths (lists of points continued by lines). All other shapes must be created by combining 1 or more paths. Luckily, we have an assortment of path cartoon functions which make it possible to compose very complex shapes.

Offset let'southward await at the rectangle. At that place are 3 functions that depict rectangles on the canvas:

fillRect(x, y, width, height): Draws a filled rectangle.
strokeRect(ten, y, width, meridian): Draws a rectangular outline.
clearRect(x, y, width, height): 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 height-left corner of the rectangle. width and top provide the rectangle's size.

Beneath is the draw() function from the previous folio, but now it is making use of these 3 functions.

Rectangular shape case

                                                                            <html                    >                                                                              <torso                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sail                    >                                                                              </body                    >                                                                              </html                    >

                                  part                  draw                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  60                  ,                  lx                  )                  ;                  ctx.                  strokeRect                  (                  50                  ,                  50                  ,                  50                  ,                  l                  )                  ;                  }                  }

This example'south output is shown below.

The fillRect() role draws a big blackness foursquare 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the middle, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared foursquare.

In upcoming pages we'll run across two alternative methods for clearRect(), and we'll also meet how to modify the color and stroke mode of the rendered shapes.

Different the path functions we'll run across in the next department, all 3 rectangle functions draw immediately to the canvas.

Drawing paths

Now let's look at paths. A path is a listing of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can exist airtight. To make shapes using paths, we accept some extra steps:

First, you lot create the path.
And then you lot apply cartoon commands to draw into the path.
Once the path has been created, you can stroke or fill the path to render it.

Hither are the functions used to perform these steps:

beginPath(): Creates a new path. In one case created, future cartoon commands are directed into the path and used to build the path up.
Path methods: Methods to fix different paths for objects.
closePath(): Adds a directly line to the path, going to the start of the current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape past filling the path'southward content expanse.

The first stride 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 time this method is called, the list is reset and we tin kickoff drawing new shapes.

Note: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is always treated every bit a moveTo(), regardless of what information technology actually is. For that reason, you will most always want to specifically set your starting position after resetting a path.

The second stride is calling the methods that actually specify the paths to be fatigued. Nosotros'll run into these shortly.

The third, and an optional stride, is to call closePath(). This method tries to close the shape by drawing a directly line from the current point to the start. If the shape has already been closed or there's only one point in the list, this part does zero.

Note: When yous call make full(), any open up shapes are closed automatically, and then you don't accept to call closePath(). This is not the case when you phone call stroke().

Drawing a triangle

For example, the code for cartoon a triangle would await something similar this:

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "sail"                                        width                                          =                      "100"                                        height                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvass'                  )                  ;                  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 similar this:

Moving the pen

One very useful function, which doesn't actually draw annihilation just becomes part of the path listing described above, is the moveTo() office. You can probably best remember of this as lifting a pen or pencil from one spot on a piece of newspaper and placing it on the next.

moveTo(x, y): Moves the pen to the coordinates specified by 10 and y.

When the canvass is initialized or beginPath() is called, you typically will want to employ the moveTo() function to place the starting bespeak somewhere else. We could as well use moveTo() to draw unconnected paths. Have a look at the smiley confront below.

To try this for yourself, yous can utilize the code snippet below. Just paste information technology into the draw() function we saw earlier.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvass                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvass                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Rima oris (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left centre                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Right heart                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

If you'd like to see the connecting lines, you lot can remove the lines that call moveTo().

Annotation: To learn more about the arc() office, see the Arcs section beneath.

Lines

For cartoon straight lines, use the lineTo() method.

lineTo(ten, y): Draws a line from the electric current cartoon position to the position specified by x and y.

This method takes two arguments, x and y, which are the coordinates of the line'south end point. The starting point is dependent on previously drawn paths, where the finish point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the moveTo() method.

The case below draws ii triangles, i filled and one outlined.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sheet                    >                                                                              </body                    >                                                                              </html                    >

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  // 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 by calling beginPath() to starting time a new shape path. Nosotros then use the moveTo() method to move the starting betoken to the desired position. Below this, two lines are drawn which brand up two sides of the triangle.

Y'all'll notice the difference betwixt the filled and stroked triangle. This is, as mentioned above, because 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, just 2 lines would have been drawn, not a complete triangle.

Arcs

To draw arcs or circles, nosotros utilise 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 management 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 by a directly line.

Let's have a more than detailed look at the arc method, which takes vi parameters: x and y are the coordinates of the center of the circle on which the arc should exist drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start 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 truthful, 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 post-obit example is a niggling more complex than the ones nosotros've seen higher up. It draws 12 different arcs all with different angles and fills.

The 2 for loops are for looping through the rows and columns of arcs. For each arc, nosotros kickoff a new path past calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you lot wouldn't necessarily do that in real life.

The x and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the offset column and is increased past steps of 90 degrees, culminating in a complete circle in the last column.

The argument for the clockwise parameter results in the commencement and third row being drawn every bit clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if argument makes the superlative one-half stroked arcs and the bottom half filled arcs.

Notation: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.

                                                                            <html                    >                                                                              <trunk                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "sail"                                        width                                          =                      "150"                                        height                                          =                      "200"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  sail                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  l                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting signal on circumvolve                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End point on circle                  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, bachelor in both cubic and quadratic varieties. These are generally used to describe complex organic shapes.

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the current pen position to the end betoken specified by x and y, using the control signal specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, ten, y): Draws a cubic Bézier bend from the electric current pen position to the end point specified by x and y, using the control points specified past (cp1x, cp1y) and (cp2x, cp2y).

The difference betwixt these is that a quadratic Bézier bend has a start and an end betoken (blue dots) and just ane control point (indicated by the red dot) while a cubic Bézier curve uses two command points.

The 10 and y parameters in both of these methods are the coordinates of the end bespeak. cp1x and cp1y are the coordinates of the outset command signal, and cp2x and cp2y are the coordinates of the 2d command point.

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector cartoon software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the post-obit example, nosotros'll exist drawing some unproblematic organic shapes, but if you lot have the fourth dimension and, most of all, the patience, much more than complex shapes can be created.

There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally effect in a consummate shape.

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to render a speech airship.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  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                  (                  )                  ;                  }                  }

Cubic Bezier curves

This example draws a heart using cubic Bézier curves.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "sheet"                                        width                                          =                      "150"                                        pinnacle                                          =                      "150"                                        >                                                                              </canvass                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  twenty                  ,                  25                  ,                  20                  ,                  62.v                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  lxxx                  ,                  twoscore                  ,                  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 up                  (                  )                  ;                  }                  }

Rectangles

In addition to the three methods we saw in Drawing rectangles, which describe rectangular shapes direct to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

rect(10, y, width, height): Draws a rectangle whose tiptop-left corner is specified by (x, y) with the specified width and tiptop.

Before this method is executed, the moveTo() method is automatically called with the parameters (x,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 one blazon of path office per shape. However, in that location'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 brand a set of very famous game characters.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "sheet"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

                                  part                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  15                  )                  ;                  roundedRect                  (ctx,                  xix                  ,                  19                  ,                  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                  /                  7                  ,                  -Math.                  PI                  /                  vii                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  make full                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  six                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  four                  ,                  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.                  make full                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility part to depict a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    10,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (ten,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  superlative,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y                  +                  meridian,                  10                  +                  width,                  y                  +                  tiptop                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (ten                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks like this:

We won't get over this in detail, since it'south actually surprisingly simple. The most important things to notation are the use of the fillStyle property on the drawing context, and the apply of a utility function (in this case roundedRect()). Using utility functions for $.25 of drawing yous do oft can be very helpful and reduce the amount of code you lot need, likewise as its complexity.

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 colour for paths from the default color of black to white, and so back again.

Path2D objects

Equally we accept seen in the terminal example, there can be a series of paths and drawing commands to describe objects onto your canvas. To simplify the code and to better performance, the Path2D object, available in recent versions of browsers, lets you lot cache or record these cartoon 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 instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path information.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // copy from another Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

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 tin be useful when y'all 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, we are creating a rectangle and a circle. Both are stored every bit a Path2D object, so that they are available for after usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Hither, stroke and fill are used with a path argument to describe both objects onto the canvas, for example.

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "sheet"                                        width                                          =                      "130"                                        summit                                          =                      "100"                                        >                                                                              </canvass                    >                                                                              </body                    >                                                                              </html                    >

                                  part                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  x                  ,                  ten                  ,                  50                  ,                  50                  )                  ;                  var                  circle                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  2                  *                  Math.                  PI                  )                  ;                  ctx.                  stroke                  (rectangle)                  ;                  ctx.                  fill up                  (circle)                  ;                  }                  }

Using SVG paths

Some other powerful feature of the new canvas Path2D API is using SVG path data to initialize paths on your canvas. This might allow y'all to laissez passer effectually path data and re-apply them in both, SVG and canvas.

The path volition movement to point (M10 10) and then move horizontally 80 points to the correct (h 80), so eighty points down (5 80), and then 80 points to the left (h -80), and so back to the start (z). Yous tin meet this case on the Path2D constructor page.

                                  var                  p                  =                  new                  Path2D                  (                  'M10 10 h lxxx v lxxx h -fourscore Z'                  )                  ;

« Previous
Side by side »

matthiashattlem.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Matthias Hattlem