Draw 10-sticks Abd Circles to Show

Drawing shapes with canvas

« Previous
Adjacent »

At present that nosotros have ready our canvass environment, nosotros can get into the details of how to draw on the canvas. By the end of this article, you will accept 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 will see how that tin be washed.

The grid

Earlier we can kickoff drawing, we need to talk about the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvas chemical element 150 pixels wide and 150 pixels loftier.

Normally 1 unit of measurement in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the pinnacle 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). Later in this tutorial we'll see how nosotros can translate the origin to a unlike position, rotate the grid and even calibration it, but for now we'll stick to the default.

Drawing rectangles

Different SVG, <sail> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which brand it possible to compose very circuitous shapes.

First let's look at the rectangle. There are three functions that depict rectangles on the canvass:

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

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

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

Rectangular shape example

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

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

This example's output is shown below.

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

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

Different the path functions we'll see in the next section, all three rectangle functions describe immediately to the canvass.

Drawing paths

At present let's look at paths. A path is a list of points, connected past segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:

Start, you create the path.
Then you apply drawing commands to draw into the path.
In one case the path has been created, you can stroke or fill the path to render it.

Here are the functions used to perform these steps:

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

The offset step to create a path is to telephone 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 chosen, the list is reset and we tin offset drawing new shapes.

Note: When the electric current path is empty, such as immediately later calling beginPath(), or on a newly created canvas, the kickoff path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you lot volition well-nigh always want to specifically set your starting position after resetting a path.

The second step is calling the methods that actually specify the paths to be drawn. We'll run across these presently.

The third, and an optional step, is to call closePath(). This method tries to close the shape past drawing a straight line from the current bespeak to the first. If the shape has already been closed or there'due south simply one bespeak in the list, this office does zero.

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

Drawing a triangle

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

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

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

The result looks like this:

Moving the pen

I very useful part, which doesn't actually draw anything but becomes part of the path list described higher up, is the moveTo() function. You tin probably all-time think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the side by side.

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

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

To endeavour this for yourself, you can use the code snippet beneath. Just paste it into the draw() function we saw earlier.

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

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

The issue looks like this:

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

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

Lines

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

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

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

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

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  sail.                  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 first a new shape path. We and so use the moveTo() method to motion the starting betoken to the desired position. Beneath this, ii lines are drawn which make up 2 sides of the triangle.

You'll notice the difference between the filled and stroked triangle. This is, equally mentioned in a higher place, because shapes are automatically airtight when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, simply two lines would accept been fatigued, not a complete triangle.

Arcs

To describe arcs or circles, nosotros use the arc() or arcTo() methods.

arc(ten, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given management indicated by counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given command points and radius, continued to the previous bespeak by a straight line.

Let'due south take a more detailed expect at the arc method, which takes 6 parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the starting time and finish points of the arc in radians, along the curve of the circumvolve. These are measured from the x centrality. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following example is a little more complex than the ones nosotros've seen higher up. Information technology draws 12 different arcs all with different angles and fills.

The ii for loops are for looping through the rows and columns of arcs. For each arc, we kickoff a new path past calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, merely 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 (one-half a circle) in the beginning column and is increased by steps of xc degrees, culminating in a complete circle in the last column.

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

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

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

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

Bezier and quadratic curves

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

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

The departure between these is that a quadratic Bézier bend has a showtime and an end point (blue dots) and just ane command point (indicated past the scarlet 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 signal. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the 2nd control point.

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

There's nothing very hard in these examples. In both cases we come across a succession of curves beingness drawn which finally result in a complete shape.

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to render a spoken communication balloon.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  xxx                  ,                  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                                          =                      "canvas"                                        width                                          =                      "150"                                        height                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

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

Rectangles

In addition to the three methods we saw in Cartoon rectangles, which draw rectangular shapes direct to the canvas, in that location'southward as well the rect() method, which adds a rectangular path to a currently open up path.

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

Before this method is executed, the moveTo() method is automatically chosen with the parameters (ten,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 just one type of path function per shape. However, at that place's no limitation to the number or types of paths yous can utilise to create a shape. And so in this final example, permit's combine all of the path functions to make a set of very famous game characters.

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

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

The resulting image looks like this:

We won't go over this in detail, since it'southward really surprisingly simple. The nigh important things to note are the use of the fillStyle belongings on the drawing context, and the utilise of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you lot practise often can exist very helpful and reduce the amount of code y'all demand, as well every bit its complication.

We'll take some other look at fillStyle, in more particular, subsequently in this tutorial. Here, all nosotros're doing is using it to change the make full color for paths from the default color of black to white, so back again.

Path2D objects

As we have seen in the last case, there tin be a series of paths and drawing commands to describe objects onto your canvas. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets y'all cache or record these drawing commands. Yous are able to play back your paths quickly. Allow'due south encounter how we tin construct a Path2D object:

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

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

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

The Path2D API also adds a way to combine paths using the addPath method. This 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 instance

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

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

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

Using SVG paths

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

The path volition move to point (M10 x) and so move horizontally 80 points to the right (h 80), then lxxx points down (5 fourscore), then 80 points to the left (h -80), and so back to the showtime (z). You tin run into this instance on the Path2D constructor page.

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

« Previous
Side by side »

torresiniand.blogspot.com

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