Draw a True Circle in Acrobat

Drawing shapes with canvas

« Previous
Adjacent »

Now that we accept set upward our sail environment, we tin can get into the details of how to depict on the canvas. By the end of this article, you lot volition have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when cartoon objects onto the canvas and we will see how that can be done.

The grid

Before nosotros can kickoff drawing, we need to talk almost the canvas grid or coordinate space. Our HTML skeleton from the previous page had a sail element 150 pixels broad and 150 pixels high.

Normally 1 unit in the grid corresponds to i pixel on the canvas. The origin of this grid is positioned in the peak left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the tiptop, at coordinate (x,y). Afterward in this tutorial we'll see how we tin interpret the origin to a dissimilar position, rotate the filigree and fifty-fifty calibration information technology, only for at present we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> simply supports 2 primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must be created by combining one or more than paths. Luckily, we accept an array of path cartoon functions which go far possible to compose very complex shapes.

First let'due south look at the rectangle. There are 3 functions that depict rectangles on the canvas:

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

Each of these three functions takes the aforementioned parameters. 10 and y specify the position on the sail (relative to the origin) of the peak-left corner of the rectangle. width and top provide the rectangle's size.

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

Rectangular shape case

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

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

This example's output is shown below.

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

In upcoming pages nosotros'll see 2 alternative methods for clearRect(), and we'll also see how to change the color and stroke style of the rendered shapes.

Unlike the path functions nosotros'll see in the next department, all three rectangle functions depict immediately to the sail.

Cartoon paths

Now let's await at paths. A path is a list of points, connected by segments of lines that can be of dissimilar shapes, curved or not, of unlike width and of different colour. A path, or even a subpath, can be airtight. To make shapes using paths, we take some extra steps:

First, you create the path.
Then you use cartoon commands to draw into the path.
One time the path has been created, you lot tin stroke or fill the path to render it.

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 upwards.
Path methods: Methods to set different paths for objects.
closePath(): Adds a directly line to the path, going to the kickoff of the current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape by filling the path'southward content expanse.

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

Annotation: When the current path is empty, such every bit immediately afterwards calling beginPath(), or on a newly created canvass, the kickoff path construction command is ever treated as a moveTo(), regardless of what it actually is. For that reason, y'all will almost always want to specifically prepare your starting position after resetting a path.

The second footstep is calling the methods that actually specify the paths to be fatigued. We'll see these shortly.

The third, and an optional step, is to call closePath(). This method tries to shut the shape past cartoon a straight line from the electric current indicate to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.

Notation: When you call fill(), whatever open shapes are airtight automatically, so you don't accept to call closePath(). This is non the example when you lot call stroke().

Cartoon a triangle

For example, the lawmaking for drawing a triangle would expect something like this:

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

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

The issue looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything merely becomes part of the path listing described to a higher place, is the moveTo() role. Yous can probably best recall of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the adjacent.

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

When the sail is initialized or beginPath() is chosen, y'all typically will want to apply the moveTo() function to place the starting point somewhere else. We could likewise use moveTo() to draw unconnected paths. Take a look at the smiley face below.

To try this for yourself, yous can use the lawmaking snippet below. Just paste information technology into the draw() function nosotros saw before.

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

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2nd'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  fifty                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  ninety                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The upshot looks like this:

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

Notation: To learn more about the arc() function, see the Arcs section below.

Lines

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

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

This method takes 2 arguments, x and y, which are the coordinates of the line's cease point. The starting signal is dependent on previously drawn paths, where the end point of the previous path is the starting indicate for the following, etc. The starting signal can besides be inverse past using the moveTo() method.

The instance below draws two triangles, one filled and 1 outlined.

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

                                  function                  depict                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Filled triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  25                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  105                  ,                  25                  )                  ;                  ctx.                  lineTo                  (                  25                  ,                  105                  )                  ;                  ctx.                  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 and so use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up 2 sides of the triangle.

Yous'll notice the difference between the filled and stroked triangle. This is, every bit mentioned above, considering 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 ii lines would accept 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 (10, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given command points and radius, continued to the previous point by a straight line.

Permit's take a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be fatigued. radius is self-explanatory. The startAngle and endAngle parameters define the start and stop 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 you tin use the following JavaScript expression: radians = (Math.PI/180)*degrees.

The post-obit example is a piddling more complex than the ones nosotros've seen in a higher place. It draws 12 unlike arcs all with different angles and fills.

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

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

The statement for the clockwise parameter results in the first and third row being fatigued as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the peak half stroked arcs and the bottom one-half filled arcs.

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

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

                                  office                  describe                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  four                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  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 point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  two                  ;                  // End betoken on circumvolve                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  make full                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

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

The difference between these is that a quadratic Bézier curve has a start and an end point (blue dots) and but one control signal (indicated by the cherry dot) while a cubic Bézier curve uses two command points.

The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control betoken, and cp2x and cp2y are the coordinates of the 2d control betoken.

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback equally to what nosotros're doing. This makes information technology pretty difficult to draw circuitous shapes. In the following example, we'll exist cartoon some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.

There'south cipher very hard in these examples. In both cases we see a succession of curves being fatigued which finally result in a complete shape.

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to return a speech balloon.

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

                                  office                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.five                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  xxx                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

                                  function                  draw                  (                  )                  {                  var                  canvass                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  twenty                  ,                  25                  ,                  20                  ,                  62.5                  ,                  xx                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  80                  ,                  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 addition to the three methods we saw in Cartoon rectangles, which draw rectangular shapes directly to the canvas, at that place's also the rect() method, which adds a rectangular path to a currently open path.

rect(ten, y, width, peak): Draws a rectangle whose top-left corner is specified past (10, y) with the specified width and acme.

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

Making combinations

So far, each example on this page has used only one blazon of path function per shape. However, in that location's no limitation to the number or types of paths y'all can use to create a shape. And then in this final case, let'southward combine all of the path functions to make a set of very famous game characters.

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

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

The resulting epitome looks similar this:

We won't go over this in detail, since it's actually surprisingly simple. The near important things to note are the utilize of the fillStyle property on the cartoon context, and the use of a utility function (in this example roundedRect()). Using utility functions for $.25 of cartoon you do oft can be very helpful and reduce the amount of code you need, besides equally its complication.

Nosotros'll take another look at fillStyle, in more than detail, later in this tutorial. Hither, all we're doing is using it to change the fill color for paths from the default color of black to white, and then dorsum once again.

Path2D objects

As we have seen in the last instance, there tin can be a serial of paths and drawing commands to draw objects onto your canvas. To simplify the code and to ameliorate functioning, the Path2D object, available in recent versions of browsers, lets you enshroud or record these drawing commands. You lot are able to play back your paths apace. Let'due south encounter how we can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with some other path equally an argument (creates a re-create), or optionally with a cord consisting of SVG path information.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create from some other Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

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

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

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

Path2D example

In this example, nosotros are creating a rectangle and a circumvolve. Both are stored as a Path2D object, then that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to employ instead of the current path. Hither, stroke and fill are used with a path argument to draw both objects onto the sail, for example.

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

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

Using SVG paths

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

The path volition move to point (M10 ten) and then motility horizontally fourscore points to the right (h eighty), then 80 points down (v eighty), and then 80 points to the left (h -eighty), and and so back to the start (z). You can see this example on the Path2D constructor page.

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

« Previous
Adjacent »

langonch1956.blogspot.com

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