Draw a Circle Using Html

Cartoon shapes with canvas

« Previous
Next »

Now that nosotros accept fix upwards our canvas environs, we tin get into the details of how to describe on the canvas. By the stop of this article, you will have learned how to depict rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when cartoon objects onto the sheet and we will encounter how that tin exist done.

The grid

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

Commonly 1 unit of measurement in the grid corresponds to 1 pixel on the sail. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blueish square becomes 10 pixels from the left and y pixels from the superlative, at coordinate (x,y). After in this tutorial nosotros'll see how we tin can interpret the origin to a unlike position, rotate the grid and even scale information technology, only for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> merely supports ii primitive shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created past combining one or more paths. Luckily, nosotros have an array of path drawing functions which make it possible to compose very complex shapes.

Offset allow'south await at the rectangle. At that place are iii functions that draw rectangles on the canvass:

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

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

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

Rectangular shape example

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

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

This example'south output is shown beneath.

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

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

Unlike the path functions we'll see in the next department, all 3 rectangle functions describe immediately to the canvas.

Cartoon paths

Now allow'due south wait at paths. A path is a listing of points, connected by 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 exist closed. To make shapes using paths, we take some extra steps:

First, you create the path.
Then you lot employ drawing commands to draw into the path.
Once the path has been created, you tin can stroke or fill up 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 upwardly.
Path methods: Methods to set up different paths for objects.
closePath(): Adds a straight line to the path, going to the beginning of the electric current sub-path.
stroke(): Draws the shape past stroking its outline.
fill(): Draws a solid shape by filling the path'south content area.

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

Note: When the electric current path is empty, such every bit immediately after calling beginPath(), or on a newly created canvas, the kickoff path construction command is always treated equally a moveTo(), regardless of what information technology really is. For that reason, you will almost 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 see these shortly.

The tertiary, and an optional step, is to call closePath(). This method tries to close the shape by cartoon a direct line from the current point to the showtime. If the shape has already been closed or there'due south just one indicate in the listing, this function does zero.

Note: When y'all phone call make full(), whatever open shapes are closed automatically, so you don't have to phone call closePath(). This is not the instance when you call stroke().

Drawing a triangle

For instance, the code for drawing a triangle would wait something like this:

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

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

The result looks similar this:

Moving the pen

One very useful role, which doesn't actually draw anything simply becomes part of the path listing described higher up, is the moveTo() function. You can probably best call back of this as lifting a pen or pencil from one spot on a slice of paper and placing it on the side by side.

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

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

To endeavor this for yourself, yous tin can apply the code snippet below. Just paste it into the draw() function nosotros saw earlier.

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

                                  function                  describe                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Left centre                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Correct heart                  ctx.                  stroke                  (                  )                  ;                  }                  }

The outcome looks like this:

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

Note: To larn more about the arc() function, encounter the Arcs section below.

Lines

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

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

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

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

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

                                  role                  depict                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sail.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 beginning a new shape path. We and so use the moveTo() method to motility the starting bespeak to the desired position. Below this, two lines are drawn which brand upwardly two sides of the triangle.

You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, considering shapes are automatically airtight when a path is filled, but not when they are stroked. If nosotros left out the closePath() for the stroked triangle, only two lines would have been drawn, not a consummate triangle.

Arcs

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

arc(x, 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 direction indicated by counterclockwise (defaulting to clockwise).
arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, connected to the previous point by a directly line.

Permit'south take a more than detailed look at the arc method, which takes vi parameters: x and y are the coordinates of the centre of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters ascertain the start and cease points of the arc in radians, along the curve of the circle. 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.

Note: Angles in the arc function are measured in radians, non degrees. To convert degrees to radians yous can use the post-obit JavaScript expression: radians = (Math.PI/180)*degrees.

The following case is a little more complex than the ones we've seen above. Information technology draws 12 unlike arcs all with dissimilar angles and fills.

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

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

The argument for the clockwise parameter results in the first and 3rd row existence drawn every bit clockwise arcs and the 2d and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.

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

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

                                  office                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  four                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  iii                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  10                  =                  25                  +                  j                  *                  l                  ;                  // ten coordinate                  var                  y                  =                  25                  +                  i                  *                  50                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting bespeak on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End point on circle                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill up                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The next type of paths 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 end bespeak specified by x and y, using the command point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the electric current pen position to the end point specified by ten and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).

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

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

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

There's nothing very difficult in these examples. In both cases we meet 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 speech balloon.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.v                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  l                  ,                  120                  ,                  30                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

                                  role                  describe                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves case                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  50                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  20                  ,                  62.5                  ,                  twenty                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  twoscore                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  lxxx                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.five                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }

Rectangles

In add-on to the three methods we saw in Drawing rectangles, which describe rectangular shapes straight to the canvas, there'south likewise the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

And then far, each instance on this page has used only one type of path role per shape. However, in that location's no limitation to the number or types of paths yous tin use to create a shape. So in this terminal example, permit's combine all of the path functions to make a set of very famous game characters.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  fifteen                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  9                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  xvi                  ,                  6                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  x                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  10                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  xiii                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  vii                  ,                  fake                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  eight                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  35                  ,                  4                  ,                  iv                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  6                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  xvi                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  99                  ,                  iv                  ,                  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.                  make full                  (                  )                  ;                  ctx.fillStyle                  =                  'white'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  91                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  88                  ,                  96                  ,                  87                  ,                  99                  ,                  87                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  87                  ,                  103                  ,                  88                  ,                  106                  ,                  91                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  94                  ,                  106                  ,                  95                  ,                  103                  ,                  95                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  95                  ,                  99                  ,                  94                  ,                  96                  ,                  91                  ,                  96                  )                  ;                  ctx.                  moveTo                  (                  103                  ,                  96                  )                  ;                  ctx.                  bezierCurveTo                  (                  100                  ,                  96                  ,                  99                  ,                  99                  ,                  99                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  99                  ,                  103                  ,                  100                  ,                  106                  ,                  103                  ,                  106                  )                  ;                  ctx.                  bezierCurveTo                  (                  106                  ,                  106                  ,                  107                  ,                  103                  ,                  107                  ,                  101                  )                  ;                  ctx.                  bezierCurveTo                  (                  107                  ,                  99                  ,                  106                  ,                  96                  ,                  103                  ,                  96                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.fillStyle                  =                  'black'                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  101                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }                  // A utility function to draw a rectangle with rounded corners.                  office                  roundedRect                  (                  ctx,                    10,                    y,                    width,                    peak,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  acme,                  10                  +                  radius,                  y                  +                  superlative,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  peak,                  x                  +                  width,                  y                  +                  pinnacle                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y,                  x                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (ten,                  y,                  10,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting epitome looks like this:

We won't get over this in detail, since it'south actually surprisingly simple. The nearly important things to annotation are the utilise of the fillStyle belongings on the cartoon context, and the use of a utility part (in this case roundedRect()). Using utility functions for bits of drawing yous practise often can exist very helpful and reduce the corporeality of lawmaking y'all need, as well as its complexity.

We'll have another await at fillStyle, in more detail, later in this tutorial. Hither, all we're doing is using it to alter the make full colour for paths from the default colour of black to white, so back once more.

Path2D objects

As nosotros have seen in the concluding instance, in that location can be a series of paths and drawing commands to depict objects onto your canvas. To simplify the code and to meliorate performance, the Path2D object, bachelor in recent versions of browsers, lets you cache or record these drawing commands. You lot are able to play back your paths rapidly. Let's see how we tin can construct a Path2D object:

Path2D(): The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path equally an statement (creates a re-create), or optionally with a cord consisting of SVG path data.

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // copy from another 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 fashion to combine paths using the addPath method. This tin be useful when you want 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 example, nosotros 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 accept 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 sheet, for example.

                                                                            <html                    >                                                                              <trunk                                          onload                                              =                        "                                                  describe                          (                          )                          ;                                                "                                                              >                                                                              <sheet                    id                                          =                      "canvas"                                        width                                          =                      "130"                                        pinnacle                                          =                      "100"                                        >                                                                              </canvas                    >                                                                              </body                    >                                                                              </html                    >

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

Using SVG paths

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

The path will movement to betoken (M10 10) so motility horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -fourscore), and so back to the start (z). You lot can see this case on the Path2D constructor page.

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

« Previous
Next »

kerrwhimand.blogspot.com

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