C Circle Draw No Form

Drawing shapes with sheet

« Previous
Adjacent »

Now that we have set up up our canvas environment, nosotros tin can get into the details of how to draw on the canvas. Past the terminate of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we volition see how that can be done.

The grid

Before we can beginning drawing, we need to talk about the sail 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 of measurement in the grid corresponds to i pixel on the canvas. The origin of this grid is positioned in the height left corner at coordinate (0,0). All elements are placed relative to this origin. And so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the tiptop, at coordinate (ten,y). Afterwards in this tutorial we'll meet how we can interpret the origin to a different position, rotate the grid and even scale information technology, simply for at present we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> just supports two primitive shapes: rectangles and paths (lists of points continued by lines). All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path cartoon functions which arrive possible to compose very circuitous shapes.

First let's look at the rectangle. In that location are three functions that draw rectangles on the canvas:

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

Each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle'southward size.

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

Rectangular shape example

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

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

This example's output is shown below.

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

In upcoming pages nosotros'll see two alternative methods for clearRect(), and we'll likewise encounter how to change the color and stroke manner of the rendered shapes.

Unlike the path functions nosotros'll see in the next department, all iii rectangle functions draw immediately to the canvas.

Drawing paths

Now let's look at paths. A path is a list of points, connected by segments of lines that tin exist of different shapes, curved or not, of dissimilar width and of unlike colour. A path, or fifty-fifty a subpath, can be closed. To make shapes using paths, we accept some extra steps:

First, y'all create the path.
So you lot use drawing commands to draw into the path.
Once the path has been created, you can stroke or fill up the path to return information technology.

Here are the functions used to perform these steps:

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

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

Annotation: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is e'er treated equally a moveTo(), regardless of what it really is. For that reason, you will almost ever want to specifically set up your starting position afterward resetting a path.

The second step is calling the methods that actually specify the paths to exist drawn. We'll see these shortly.

The tertiary, and an optional step, is to call closePath(). This method tries to close the shape by cartoon a direct line from the current bespeak to the start. If the shape has already been airtight or in that location's only one point in the list, this part does nothing.

Note: When y'all call fill(), whatever open up shapes are airtight automatically, so yous don't accept to call closePath(). This is not the example when yous call stroke().

Drawing a triangle

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

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

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

The result looks like this:

Moving the pen

Ane very useful office, which doesn't really depict anything but becomes part of the path list described above, is the moveTo() role. You lot tin probably best remember of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

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

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

To try this for yourself, you can use the code snippet below. Just paste it into the describe() function we saw earlier.

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  l                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  truthful                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  faux                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left center                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  xc                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Correct centre                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

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

Note: To learn more well-nigh the arc() function, come across the Arcs section below.

Lines

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

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

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

The case beneath draws 2 triangles, 1 filled and one outlined.

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

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

This starts by calling beginPath() to starting time a new shape path. We then utilise the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

You'll detect the departure betwixt the filled and stroked triangle. This is, as mentioned in a higher place, because shapes are automatically closed when a path is filled, merely not when they are stroked. If we left out the closePath() for the stroked triangle, simply two lines would have been drawn, not a complete triangle.

Arcs

To draw arcs or circles, we use the arc() or arcTo() methods.

arc(ten, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (ten, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated past counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, connected to the previous point past a directly line.

Let'south have a more than detailed look at the arc method, which takes vi parameters: x and y are the coordinates of the heart of the circle on which the arc should exist drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, forth the bend of the circle. These are measured from the ten axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is fatigued clockwise.

Annotation: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can utilize the following JavaScript expression: radians = (Math.PI/180)*degrees.

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

The 2 for loops are for looping through the rows and columns of arcs. For each arc, nosotros get-go a new path by calling beginPath(). In the lawmaking, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily exercise that in real life.

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

The argument for the clockwise parameter results in the get-go and 3rd row being fatigued as clockwise arcs and the 2nd and fourth row as counterclockwise arcs. Finally, the if statement makes the meridian half stroked arcs and the bottom half filled arcs.

Notation: This case requires a slightly larger sheet than the others on this folio: 150 ten 200 pixels.

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

                                  function                  draw                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  iii                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  fifty                  ;                  // 10 coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circumvolve                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  ii                  ;                  // End indicate on circumvolve                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the current pen position to the end bespeak specified by x and y, using the control signal 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 indicate specified by 10 and y, using the control points specified past (cp1x, cp1y) and (cp2x, cp2y).

The divergence between these is that a quadratic Bézier curve has a outset and an end betoken (blue dots) and just one control point (indicated by the reddish dot) while a cubic Bézier curve uses 2 command points.

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

Using quadratic and cubic Bézier curves can be quite challenging, because different vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what nosotros're doing. This makes it pretty hard to draw complex shapes. In the following example, nosotros'll be drawing some simple organic shapes, just if you have the fourth dimension and, about of all, the patience, much more circuitous shapes tin be created.

In that location'southward goose egg very difficult in these examples. In both cases we run across a succession of curves beingness drawn which finally result in a consummate shape.

Quadratic Bezier curves

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

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

                                  office                  depict                  (                  )                  {                  var                  sheet                  =                  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.v                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  l                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  lx                  ,                  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                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <canvas                    id                                          =                      "canvass"                                        width                                          =                      "150"                                        meridian                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  l                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.5                  ,                  20                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  eighty                  ,                  xl                  ,                  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 addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes directly to the canvas, in that location's also the rect() method, which adds a rectangular path to a currently open up path.

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

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

Making combinations

So far, each instance on this page has used only one type of path function per shape. All the same, there's no limitation to the number or types of paths you can use to create a shape. So in this final case, allow's combine all of the path functions to make a set of very famous game characters.

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  xix                  ,                  19                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  vii                  ,                  fake                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  make full                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  xvi                  ,                  35                  ,                  four                  ,                  four                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  six                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  sixteen                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  iv                  ,                  iv                  )                  ;                  }                  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 up                  (                  )                  ;                  ctx.fillStyle                  =                  'blackness'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  two                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    ten,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  summit,                  x                  +                  radius,                  y                  +                  tiptop,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  ten                  +                  width,                  y                  +                  pinnacle                  -                  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 similar this:

We won't get over this in item, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle belongings on the drawing context, and the employ of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can exist very helpful and reduce the corporeality of lawmaking yous demand, as well equally its complexity.

We'll take another look at fillStyle, in more than detail, later on in this tutorial. Here, all we're doing is using it to modify the fill up color for paths from the default color of black to white, and and then back once again.

Path2D objects

As we take seen in the terminal example, there can be a series of paths and cartoon commands to draw objects onto your canvas. To simplify the code and to improve operation, the Path2D object, available in recent versions of browsers, lets y'all cache or record these cartoon commands. You are able to play back your paths apace. Let'due south see how nosotros can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path every bit an argument (creates a copy), or optionally with a string consisting of SVG path information.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create 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 likewise adds a way to combine paths using the addPath method. This tin can be useful when you desire 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 example

In this example, we are creating a rectangle and a circumvolve. Both are stored equally 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 use instead of the current path. Here, stroke and fill are used with a path statement to draw both objects onto the canvas, for example.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  'second'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  x                  ,                  50                  ,                  50                  )                  ;                  var                  circle                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  ii                  *                  Math.                  PI                  )                  ;                  ctx.                  stroke                  (rectangle)                  ;                  ctx.                  fill                  (circle)                  ;                  }                  }

Using SVG paths

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

The path volition move to indicate (M10 ten) and then movement horizontally eighty points to the correct (h 80), then 80 points downward (five 80), then lxxx points to the left (h -80), and so back to the start (z). Yous can see this example on the Path2D constructor page.

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

« Previous
Next »

henriquezassaings.blogspot.com

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