Draw Circle on Canvas Html

Drawing shapes with canvas

« Previous
Next »

At present that we have set up our sail environment, nosotros tin can get into the details of how to draw on the canvass. By the terminate of this commodity, yous will accept learned how to describe rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the sheet and we will see how that tin can exist done.

The grid

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

Normally one unit in the grid corresponds to i pixel on the sheet. 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 bluish square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a unlike position, rotate the filigree and fifty-fifty scale information technology, but for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports two primitive shapes: rectangles and paths (lists of points continued by lines). All other shapes must be created by combining ane or more paths. Luckily, nosotros take an array of path drawing functions which make it possible to etch very complex shapes.

First permit'south look at the rectangle. At that place are iii functions that draw rectangles on the canvas:

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

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

Beneath is the draw() function from the previous folio, but now it is making apply of these 3 functions.

Rectangular shape example

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

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

This example'south output is shown below.

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

In upcoming pages we'll encounter 2 alternative methods for clearRect(), and nosotros'll as well encounter how to modify the color and stroke manner of the rendered shapes.

Unlike the path functions we'll see in the side by side section, all iii rectangle functions draw immediately to the sheet.

Cartoon paths

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

Beginning, you create the path.
Then you utilize drawing commands to depict into the path.
One time the path has been created, you can stroke or fill the path to render information technology.

Hither are the functions used to perform these steps:

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

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

Note: When the current path is empty, such as immediately later on calling beginPath(), or on a newly created canvas, the first path construction command is always treated every bit a moveTo(), regardless of what it actually is. For that reason, you volition almost e'er desire 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 come across these shortly.

The tertiary, and an optional step, is to call closePath(). This method tries to close the shape past cartoon a directly line from the current point to the showtime. If the shape has already been closed or there's only one point in the list, this function does goose egg.

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

Drawing a triangle

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

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

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

The issue looks similar this:

Moving the pen

One very useful function, which doesn't actually describe anything merely becomes role of the path list described above, is the moveTo() function. Yous can probably all-time call up 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 x and y.

When the sail is initialized or beginPath() is chosen, you typically volition want to use the moveTo() function to place the starting bespeak somewhere else. We could also use moveTo() to draw unconnected paths. Have a look at the smiley face up below.

To try this for yourself, you can apply the code snippet below. Just paste it into the draw() function nosotros saw before.

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

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

The result looks like this:

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

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

Lines

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

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

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

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

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

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

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

Y'all'll notice the difference between the filled and stroked triangle. This is, equally mentioned to a higher place, because shapes are automatically closed when a path is filled, merely not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been drawn, not a consummate triangle.

Arcs

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

arc(x, y, radius, startAngle, endAngle, counterclockwise): Draws an arc which is centered at (ten, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated 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.

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

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

The following example is a little more complex than the ones we've seen in a higher place. Information technology draws 12 unlike arcs all with unlike angles and fills.

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

The x and y coordinates should exist clear enough. radius and startAngle are stock-still. The endAngle starts at 180 degrees (half a circumvolve) in the start column and is increased by steps of 90 degrees, culminating in a complete circumvolve in the last column.

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

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  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                  =                  xx                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Stop point on circumvolve                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (ten,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  one                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

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

The difference betwixt these is that a quadratic Bézier bend has a first and an cease bespeak (blueish dots) and just ane control point (indicated by the red dot) while a cubic Bézier bend uses two control points.

The 10 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 point, and cp2x and cp2y are the coordinates of the second control point.

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

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

Quadratic Bezier curves

This instance uses multiple quadratic Bézier curves to render a speech balloon.

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  fifty                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  threescore                  ,                  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                          (                          )                          ;                                                "                                                              >                                                                              <canvass                    id                                          =                      "canvas"                                        width                                          =                      "150"                                        pinnacle                                          =                      "150"                                        >                                                                              </canvas                    >                                                                              </trunk                    >                                                                              </html                    >

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  seventy                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.5                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  lxxx                  ,                  130                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.five                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  xl                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

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

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

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

Making combinations

So far, each example on this page has used simply one blazon of path function per shape. However, in that location'due south no limitation to the number or types of paths you can use to create a shape. And then in this concluding case, permit'due south combine all of the path functions to brand a gear up of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  15                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  ten                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  xvi                  ,                  vi                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  seven                  ,                  -Math.                  PI                  /                  vii                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  make full                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  xvi                  ,                  35                  ,                  iv                  ,                  4                  )                  ;                  }                  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                  ,                  four                  ,                  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.                  make full                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  two                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  ctx.                  make full                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }                  // A utility function to depict a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (10,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  height,                  10                  +                  radius,                  y                  +                  pinnacle,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  elevation                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (10,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks like this:

We won't go over this in detail, since it's actually surprisingly elementary. The most important things to note are the employ of the fillStyle holding on the drawing context, and the utilize of a utility function (in this case roundedRect()). Using utility functions for $.25 of drawing you practise often can be very helpful and reduce the amount of code you demand, equally well as its complexity.

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

Path2D objects

As we have seen in the terminal instance, in that location can be a series of paths and drawing commands to draw objects onto your sheet. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets you cache or record these cartoon commands. You are able to play back your paths quickly. Permit'southward see how we can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path equally an statement (creates a copy), or optionally with a cord 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 like 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 tin be useful when you want to build objects from several components, for instance.

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

Path2D example

In this example, we are creating a rectangle and a circle. Both are stored every bit 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. Hither, stroke and fill are used with a path statement to draw both objects onto the canvas, for case.

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

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

Using SVG paths

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

The path will motility to point (M10 ten) and then move horizontally fourscore points to the right (h 80), then lxxx points downwardly (v eighty), then 80 points to the left (h -80), and then dorsum to the start (z). You lot tin can see this instance on the Path2D constructor folio.

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

« Previous
Side by side »

leachmanweepleget.blogspot.com

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