How To Draw Concentric Circles On Canvas

Drawing shapes with canvas

« Previous
Next »

Now that nosotros accept gear up up our sail surround, nosotros tin go into the details of how to draw on the canvas. By the end of this article, you volition have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when cartoon objects onto the canvas and we will meet how that can exist done.

The grid

Earlier nosotros tin can start drawing, nosotros demand to talk near the sheet grid 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 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So 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 (x,y). Later in this tutorial we'll see how we can translate the origin to a unlike position, rotate the grid and even scale it, but for at present we'll stick to the default.

Cartoon rectangles

Unlike SVG, <canvas> only supports 2 primitive shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make it possible to etch very complex shapes.

First let's await at the rectangle. There are three functions that draw rectangles on the canvas:

fillRect(ten, y, width, height): Draws a filled rectangle.
strokeRect(ten, y, width, pinnacle): Draws a rectangular outline.
clearRect(x, y, width, height): Clears the specified rectangular area, making it fully transparent.

Each of these 3 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 summit provide the rectangle's size.

Below is the draw() function from the previous page, just now it is making use of these three functions.

Rectangular shape example

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  threescore                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  l                  ,                  50                  ,                  50                  ,                  50                  )                  ;                  }                  }

This example's output is shown beneath.

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

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

Unlike the path functions we'll come across in the next section, all 3 rectangle functions depict immediately to the canvass.

Cartoon paths

Now let's expect at paths. A path is a listing of points, connected by segments of lines that tin can be of dissimilar shapes, curved or non, of different width and of different color. A path, or even a subpath, can be closed. To brand shapes using paths, nosotros have some extra steps:

Beginning, you create the path.
Then y'all use drawing commands to draw into the path.
Once the path has been created, you lot can stroke or fill the path to render it.

Hither are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, futurity drawing commands are directed into the path and used to build the path upwards.
Path methods: Methods to set unlike paths for objects.
closePath(): Adds a directly line to the path, going to the outset of the current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape past filling the path's content area.

The starting time stride to create a path is to phone 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 nosotros can start cartoon new shapes.

Notation: When the current path is empty, such as immediately afterwards calling beginPath(), or on a newly created canvas, the first path structure 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 exist drawn. We'll meet these shortly.

The third, and an optional pace, is to call closePath(). This method tries to shut the shape past drawing a direct line from the current indicate to the commencement. If the shape has already been closed or there's only one point in the listing, this office does nothing.

Note: When yous telephone call fill(), any open shapes are closed automatically, and so you don't have to telephone call closePath(). This is non the case when you call stroke().

Drawing a triangle

For example, the code for cartoon a triangle would look something like this:

                                                                            <html                    >                                                                              <trunk                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvass                    id                                          =                      "canvass"                                        width                                          =                      "100"                                        meridian                                          =                      "100"                                        >                                                                              </sail                    >                                                                              </body                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }

The effect looks like this:

Moving the pen

One very useful function, which doesn't actually describe anything but becomes function of the path list described above, is the moveTo() part. You lot can probably best recollect of this as lifting a pen or pencil from one spot on a slice of paper and placing information technology on the next.

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

When the canvas is initialized or beginPath() is chosen, yous typically will want to use the moveTo() function to place the starting indicate somewhere else. Nosotros could also utilise moveTo() to draw unconnected paths. Accept a look at the smiley face below.

To try this for yourself, you can use the lawmaking snippet beneath. Only paste it into the depict() function we saw earlier.

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

                                  role                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sheet.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                  (                  sixty                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks similar this:

If you'd like to come across the connecting lines, y'all tin remove the lines that telephone call moveTo().

Annotation: To learn more than about the arc() role, run into the Arcs section below.

Lines

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

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

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

The example beneath draws two triangles, one filled and 1 outlined.

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Filled triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  25                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  105                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  25                  ,                  105                  )                  ;                  ctx.                  make full                  (                  )                  ;                  // 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 outset a new shape path. We then use the moveTo() method to movement the starting point to the desired position. Below this, ii lines are fatigued which make up ii sides of the triangle.

Y'all'll observe the difference between 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, simply ii lines would have 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 by a direct line.

Let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the middle of the circle on which the arc should be fatigued. radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x centrality. The counterclockwise parameter is a Boolean value which, when truthful, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

Note: Angles in the arc function are measured in radians, not degrees. To catechumen degrees to radians you lot tin use the following JavaScript expression: radians = (Math.PI/180)*degrees.

The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with unlike angles and fills.

The two for loops are for looping through the rows and columns of arcs. For each arc, we showtime a new path by calling beginPath(). In the lawmaking, each of the parameters for the arc is in a variable for clarity, but you lot wouldn't necessarily practice that in real life.

The x and y coordinates should exist clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (one-half a circle) in the start cavalcade and is increased past steps of xc degrees, culminating in a complete circumvolve in the last cavalcade.

The statement for the clockwise parameter results in the outset and 3rd row existence fatigued every bit clockwise arcs and the 2nd and quaternary row as counterclockwise arcs. Finally, the if argument makes the top half stroked arcs and the bottom one-half filled arcs.

Annotation: This case requires a slightly larger canvas than the others on this page: 150 ten 200 pixels.

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

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  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                  ;                  // ten coordinate                  var                  y                  =                  25                  +                  i                  *                  fifty                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circumvolve                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Terminate bespeak on circumvolve                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (ten,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  i                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.

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

The difference between these is that a quadratic Bézier curve has a first and an end betoken (blue dots) and just ane control point (indicated past the carmine dot) while a cubic Bézier curve uses two command points.

The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first command bespeak, and cp2x and cp2y are the coordinates of the second control point.

Using quadratic and cubic Bézier curves can exist quite challenging, because dissimilar vector drawing software like Adobe Illustrator, we don't have direct visual feedback every bit to what we're doing. This makes it pretty hard to draw complex shapes. In the following case, we'll be drawing some uncomplicated organic shapes, merely if you have the fourth dimension and, nigh of all, the patience, much more complex shapes can be created.

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

Quadratic Bezier curves

This instance uses multiple quadratic Bézier curves to return a voice communication airship.

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  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                  ,                  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                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sail                    >                                                                              </torso                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves case                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  seventy                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  twenty                  ,                  25                  ,                  xx                  ,                  62.five                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  80                  ,                  130                  ,                  62.v                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.v                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }

Rectangles

In improver to the three methods we saw in Drawing rectangles, which draw rectangular shapes directly to the canvas, there's likewise the rect() method, which adds a rectangular path to a currently open path.

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

Before this method is executed, the moveTo() method is automatically chosen with the parameters (x,y). In other words, the electric current pen position is automatically reset to the default coordinates.

Making combinations

So far, each case on this page has used but 1 type of path function per shape. Withal, there's no limitation to the number or types of paths you lot can utilise to create a shape. So in this concluding instance, let'southward combine all of the path functions to make a set of very famous game characters.

                                                                            <html                    >                                                                              <torso                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvass"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </sheet                    >                                                                              </trunk                    >                                                                              </html                    >

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  xv                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  ix                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  half dozen                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  ten                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  eight                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  35                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  half-dozen                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  xvi                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  iv                  ,                  4                  )                  ;                  }                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  102                  )                  ;                  ctx.                  bezierCurveTo                  (                  83                  ,                  94                  ,                  89                  ,                  88                  ,                  97                  ,                  88                  )                  ;                  ctx.                  bezierCurveTo                  (                  105                  ,                  88                  ,                  111                  ,                  94                  ,                  111                  ,                  102                  )                  ;                  ctx.                  lineTo                  (                  111                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  106.333                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  101.666                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  97                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  92.333                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  87.666                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  ii                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  make full                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility office to describe a rectangle with rounded corners.                  office                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    peak,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (ten,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  height,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  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:

We won't go over this in detail, since it's actually surprisingly elementary. The most important things to note are the utilise of the fillStyle property on the drawing context, and the use of a utility function (in this instance roundedRect()). Using utility functions for bits of cartoon you do often can be very helpful and reduce the amount of code you need, besides as its complexity.

We'll take another look at fillStyle, in more detail, later in this tutorial. Hither, all we're doing is using information technology to change the fill up color for paths from the default color of blackness to white, and then back once more.

Path2D objects

As we have seen in the last example, there tin can be a series of paths and drawing commands to draw objects onto your sail. To simplify the code and to better performance, the Path2D object, available in contempo versions of browsers, lets you cache or record these cartoon commands. You are able to play back your paths chop-chop. Let'southward see how we tin construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path every bit an statement (creates a re-create), or optionally with a string consisting of SVG path data.

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

All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are available on Path2D objects.

The Path2D API also adds a way to combine paths using the addPath method. This can exist useful when you want to build objects from several components, for example.

Path2D.addPath(path [, transform]): Adds a path to the electric current path with an optional transformation matrix.

Path2D example

In this instance, we 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 accept a Path2D object to employ instead of the current path. Here, stroke and make full are used with a path argument to describe both objects onto the sheet, for example.

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  10                  ,                  50                  ,                  50                  )                  ;                  var                  circumvolve                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  2                  *                  Math.                  PI                  )                  ;                  ctx.                  stroke                  (rectangle)                  ;                  ctx.                  fill                  (circumvolve)                  ;                  }                  }

Using SVG paths

Another powerful feature of the new canvas Path2D API is using SVG path data to initialize paths on your canvas. This might allow you to pass around path information and re-use them in both, SVG and canvas.

The path will move to point (M10 10) and then move horizontally 80 points to the right (h lxxx), so eighty points downwards (v 80), so fourscore points to the left (h -80), and so dorsum to the start (z). You tin see this instance on the Path2D constructor page.

                                  var                  p                  =                  new                  Path2D                  (                  'M10 x h 80 5 80 h -80 Z'                  )                  ;

« Previous
Adjacent »

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

Posted by: alexanderthowas1943.blogspot.com