Draw Circle With Canvas Javascript

Drawing shapes with canvas

« Previous
Next »

Now that we have set up our sail environment, we can get into the details of how to depict on the canvass. By the finish of this article, you will take learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when cartoon objects onto the canvas and nosotros will meet how that can be done.

The grid

Before we can get-go drawing, we need to talk most the canvas filigree or coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.

Usually 1 unit of measurement in the filigree corresponds to i pixel on the sheet. The origin of this grid is positioned in the height 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 foursquare becomes x pixels from the left and y pixels from the top, at coordinate (x,y). After in this tutorial we'll see how nosotros can interpret the origin to a different position, rotate the grid and even scale information technology, but for now nosotros'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports two primitive 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 drawing functions which make information technology possible to compose very complex shapes.

Offset let'south look at the rectangle. There are three functions that describe rectangles on the sheet:

fillRect(x, y, width, superlative): Draws a filled rectangle.
strokeRect(x, y, width, peak): Draws a rectangular outline.
clearRect(x, y, width, superlative): Clears the specified rectangular surface area, making information technology fully transparent.

Each of these three functions takes the same parameters. 10 and y specify the position on the canvas (relative to the origin) of the elevation-left corner of the rectangle. width and acme provide the rectangle'south size.

Below is the depict() role from the previous folio, but now information technology is making employ of these three functions.

Rectangular shape example

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

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

This example's output is shown below.

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

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

Unlike the path functions we'll run across in the next section, all iii rectangle functions draw immediately to the canvas.

Drawing paths

At present let's await at paths. A path is a listing of points, continued by segments of lines that can be of unlike shapes, curved or not, of different width and of different color. A path, or even a subpath, tin can be closed. To brand shapes using paths, nosotros take some actress steps:

Offset, you lot create the path.
Then yous use drawing commands to draw into the path.
One time the path has been created, you can stroke or fill the path to render it.

Here are the functions used to perform these steps:

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

The first step to create a path is to call the beginPath(). Internally, paths are stored as a listing of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is chosen, the list is reset and we can start cartoon new shapes.

Note: When the current path is empty, such equally immediately after calling beginPath(), or on a newly created sheet, the first path construction control is always treated as a moveTo(), regardless of what it actually is. For that reason, you volition most always want to specifically prepare your starting position after resetting a path.

The 2d step is calling the methods that actually specify the paths to be fatigued. We'll see these soon.

The third, and an optional pace, is to phone call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's merely 1 signal in the list, this function does naught.

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

Cartoon a triangle

For case, the lawmaking for drawing a triangle would look something like this:

                                                                            <html                    >                                                                              <body                                          onload                                              =                        "                                                  depict                          (                          )                          ;                                                "                                                              >                                                                              <sail                    id                                          =                      "canvass"                                        width                                          =                      "100"                                        top                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  role                  draw                  (                  )                  {                  var                  sheet                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  50                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }

The result looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything simply becomes function of the path list described higher up, is the moveTo() function. You tin can probably best think of this every bit lifting a pen or pencil from i spot on a piece of paper and placing information technology on the next.

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

When the canvas is initialized or beginPath() is called, you typically will want to employ the moveTo() role to identify the starting point somewhere else. We could also apply moveTo() to draw unconnected paths. Have a look at the smiley face below.

To effort this for yourself, you can use the lawmaking snippet below. Just paste it into the draw() function we saw earlier.

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

                                  part                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  'second'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  truthful                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  threescore                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The outcome looks similar this:

If you'd similar to see the connecting lines, you lot tin remove the lines that telephone call moveTo().

Note: To learn more almost the arc() function, see the Arcs section below.

Lines

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

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

This method takes two arguments, 10 and y, which are the coordinates of the line's finish bespeak. The starting point is dependent on previously drawn paths, where the terminate point of the previous path is the starting signal for the following, etc. The starting point can also exist inverse by using the moveTo() method.

The example below draws two triangles, one filled and one outlined.

                                                                            <html                    >                                                                              <trunk                                          onload                                              =                        "                                                  draw                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        peak                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  part                  describe                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  // Filled triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  25                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  105                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  25                  ,                  105                  )                  ;                  ctx.                  fill                  (                  )                  ;                  // Stroked triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  125                  ,                  125                  )                  ;                  ctx.                  lineTo                  (                  125                  ,                  45                  )                  ;                  ctx.                  lineTo                  (                  45                  ,                  125                  )                  ;                  ctx.                  closePath                  (                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

This starts by calling beginPath() to start a new shape path. We then use the moveTo() method to move the starting bespeak to the desired position. Below this, 2 lines are fatigued which make up two sides of the triangle.

You'll detect the deviation between the filled and stroked triangle. This is, equally mentioned to a higher place, because shapes are automatically closed when a path is filled, but not when they are stroked. If nosotros left out the closePath() for the stroked triangle, only two lines would have been drawn, not a complete triangle.

Arcs

To depict arcs or circles, we employ the arc() or arcTo() methods.

arc(ten, 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 straight line.

Let's have a more than detailed expect 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 be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and finish points of the arc in radians, along the bend of the circle. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians y'all can use the following JavaScript expression: radians = (Math.PI/180)*degrees.

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

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

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

The statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the 2nd and fourth row equally counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the lesser one-half filled arcs.

Note: This case requires a slightly larger sail than the others on this folio: 150 x 200 pixels.

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

                                  office                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  four                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  three                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  50                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  twenty                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting indicate on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End signal on circle                  var                  counterclockwise                  =                  i                  %                  ii                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill up                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The next type of paths bachelor are Bézier curves, available in both cubic and quadratic varieties. These are mostly used to draw 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 indicate specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, ten, y): Draws a cubic Bézier curve from the current pen position to the end bespeak specified by x and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).

The difference between these is that a quadratic Bézier bend has a get-go and an finish point (blue dots) and only one command point (indicated by the cherry dot) while a cubic Bézier curve uses two control points.

The x and y parameters in both of these methods are the coordinates of the terminate point. cp1x and cp1y are the coordinates of the showtime control point, and cp2x and cp2y are the coordinates of the 2d command point.

Using quadratic and cubic Bézier curves can exist quite challenging, because dissimilar vector drawing software like Adobe Illustrator, nosotros don't have direct visual feedback as to what we're doing. This makes it pretty difficult to draw circuitous shapes. In the post-obit example, we'll be drawing some simple organic shapes, simply if you accept the time and, most of all, the patience, much more circuitous shapes tin be created.

There'southward nothing very difficult in these examples. In both cases we see a succession of curves existence fatigued which finally result in a complete shape.

Quadratic Bezier curves

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

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

                                  role                  describe                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

This case draws a centre using cubic Bézier curves.

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  xl                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  l                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.v                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  fourscore                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  80                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.v                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

In add-on to the three methods we saw in Cartoon rectangles, which draw rectangular shapes straight to the canvas, there's also the rect() method, which adds a rectangular path to a currently open up path.

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

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

Making combinations

So far, each example on this page has used only ane blazon of path function per shape. However, there'southward no limitation to the number or types of paths you can employ to create a shape. Then in this final example, let's combine all of the path functions to make a fix of very famous game characters.

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  nineteen                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  ten                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  thirteen                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  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                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  xvi                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  viii                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  4                  ,                  4                  )                  ;                  }                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  102                  )                  ;                  ctx.                  bezierCurveTo                  (                  83                  ,                  94                  ,                  89                  ,                  88                  ,                  97                  ,                  88                  )                  ;                  ctx.                  bezierCurveTo                  (                  105                  ,                  88                  ,                  111                  ,                  94                  ,                  111                  ,                  102                  )                  ;                  ctx.                  lineTo                  (                  111                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  106.333                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  101.666                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  97                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  92.333                  ,                  116                  )                  ;                  ctx.                  lineTo                  (                  87.666                  ,                  111.333                  )                  ;                  ctx.                  lineTo                  (                  83                  ,                  116                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility office to describe a rectangle with rounded corners.                  part                  roundedRect                  (                  ctx,                    ten,                    y,                    width,                    peak,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  superlative,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y,                  ten                  +                  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 simple. The most important things to notation are the use of the fillStyle property on the cartoon context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing y'all do often can be very helpful and reduce the amount of lawmaking you demand, also as its complication.

Nosotros'll take another look at fillStyle, in more particular, subsequently in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and and so dorsum again.

Path2D objects

Every bit we take seen in the concluding instance, at that place can be a serial of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve functioning, the Path2D object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly. Allow'due south see how we can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path equally 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 available on Path2D objects.

The Path2D API too adds a style to combine paths using the addPath method. This can be useful when you want to build objects from several components, for instance.

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

Path2D instance

In this case, we are creating a rectangle and a circumvolve. Both are stored as a Path2D object, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally have a Path2D object to utilize instead of the current path. Here, stroke and fill are used with a path argument to draw both objects onto the canvas, for case.

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

                                  office                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  10                  ,                  50                  ,                  50                  )                  ;                  var                  circle                  =                  new                  Path2D                  (                  )                  ;                  circumvolve.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  ii                  *                  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 sail. This might permit you to pass around path information and re-utilize them in both, SVG and sail.

The path will move to point (M10 10) and and so move horizontally 80 points to the correct (h 80), and so 80 points down (v 80), and so 80 points to the left (h -fourscore), so back to the beginning (z). You can see this case on the Path2D constructor page.

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

« Previous
Next »

thackertreff1945.blogspot.com

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