Draw Circle on Html Canvas

Drawing shapes with canvas

« Previous
Adjacent »

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

The grid

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

Normally 1 unit in the grid corresponds to 1 pixel on the sheet. The origin of this filigree 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 x pixels from the left and y pixels from the top, at coordinate (x,y). Afterward in this tutorial nosotros'll see how we can translate the origin to a different position, rotate the grid and fifty-fifty calibration it, but for at present nosotros'll stick to the default.

Drawing rectangles

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

Start let's look at the rectangle. There are three functions that draw rectangles on the canvas:

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

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

Beneath is the draw() function from the previous page, but now it is making utilise of these three functions.

Rectangular shape example

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

                                  part                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  getContext                  (                  'second'                  )                  ;                  ctx.                  fillRect                  (                  25                  ,                  25                  ,                  100                  ,                  100                  )                  ;                  ctx.                  clearRect                  (                  45                  ,                  45                  ,                  threescore                  ,                  60                  )                  ;                  ctx.                  strokeRect                  (                  50                  ,                  50                  ,                  fifty                  ,                  50                  )                  ;                  }                  }

This example's output is shown below.

The fillRect() function draws a big blackness square 100 pixels on each side. The clearRect() function so erases a 60x60 pixel square from the center, so strokeRect() is chosen to create a rectangular outline 50x50 pixels inside the cleared square.

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

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

Drawing paths

Now allow's await at paths. A path is a listing of points, connected by segments of lines that tin be of dissimilar shapes, curved or not, of dissimilar width and of different color. A path, or even a subpath, can exist closed. To make shapes using paths, we accept some actress steps:

Start, yous create the path.
Then you employ drawing commands to describe into the path.
Once the path has been created, you tin can stroke or fill the path to render it.

Here are the functions used to perform these steps:

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

The first step to create a path is to phone call the beginPath(). Internally, paths are stored every bit a list of sub-paths (lines, arcs, etc) which together form a shape. Every fourth dimension this method is called, the list is reset and we tin outset cartoon new shapes.

Note: When the current path is empty, such equally immediately afterwards calling beginPath(), or on a newly created canvas, the offset path construction command is always treated as a moveTo(), regardless of what it really is. For that reason, you will nigh always desire to specifically fix your starting position after resetting a path.

The second step is calling the methods that actually specify the paths to be fatigued. Nosotros'll meet these shortly.

The tertiary, and an optional step, is to telephone call closePath(). This method tries to close the shape by drawing a straight line from the current point to the commencement. If the shape has already been closed or there's only i signal in the list, this office does nada.

Note: When you call fill(), any open shapes are closed automatically, so y'all don't have to call closePath(). This is non the case when yous telephone call stroke().

Drawing a triangle

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

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

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

The result looks like this:

Moving the pen

I very useful function, which doesn't actually draw anything only becomes office of the path list described above, is the moveTo() function. You tin probably best think of this every bit lifting a pen or pencil from one spot on a slice of paper and placing it on the next.

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

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

To try this for yourself, you can use the code snippet beneath. Just paste information technology into the depict() role we saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  fake                  )                  ;                  // Oral fissure (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Correct eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks similar this:

If you'd similar to run into the connecting lines, you can remove the lines that call moveTo().

Note: To learn more than virtually the arc() function, run into the Arcs department below.

Lines

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

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

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

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

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  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                  (                  )                  ;                  // Stroked triangle                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  125                  ,                  125                  )                  ;                  ctx.                  lineTo                  (                  125                  ,                  45                  )                  ;                  ctx.                  lineTo                  (                  45                  ,                  125                  )                  ;                  ctx.                  closePath                  (                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

This starts past calling beginPath() to start a new shape path. We and so use the moveTo() method to movement the starting point to the desired position. Below this, two lines are fatigued which brand up two sides of the triangle.

You'll discover the difference between the filled and stroked triangle. This is, every bit mentioned in a higher place, considering shapes are automatically closed when a path is filled, only not when they are stroked. If nosotros left out the closePath() for the stroked triangle, only 2 lines would have been drawn, non a consummate triangle.

Arcs

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

arc(10, 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, continued to the previous signal by a straight line.

Allow'southward have a more detailed await at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is cocky-explanatory. The startAngle and endAngle parameters define the beginning and end points of the arc in radians, along the bend 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 part are measured in radians, not degrees. To convert degrees to radians you tin use the following JavaScript expression: radians = (Math.PI/180)*degrees.

The following example is a petty more complex than the ones we've seen above. It draws 12 dissimilar 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 kickoff 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 do that in real life.

The ten and y coordinates should be clear enough. radius and startAngle are stock-still. The endAngle starts at 180 degrees (half a circumvolve) in the first cavalcade and is increased by steps of 90 degrees, culminating in a complete circumvolve in the concluding cavalcade.

The statement for the clockwise parameter results in the first and 3rd row being drawn as clockwise arcs and the second 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 page: 150 x 200 pixels.

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

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

Bezier and quadratic curves

The side by side type of paths bachelor are Bézier curves, bachelor in both cubic and quadratic varieties. These are more often than not used to draw complex organic shapes.

quadraticCurveTo(cp1x, cp1y, 10, y): Draws a quadratic Bézier bend from the current pen position to the end bespeak specified by x and y, using the control point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 10, y): Draws a cubic Bézier curve from the current pen position to the end point specified by x 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 beginning and an end signal (blueish dots) and but ane control point (indicated by the cherry-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 signal. cp1x and cp1y are the coordinates of the starting time control bespeak, 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 drawing software like Adobe Illustrator, we don't take direct visual feedback as to what nosotros're doing. This makes it pretty hard to depict complex shapes. In the following case, we'll be drawing some uncomplicated organic shapes, but if yous have the time and, near of all, the patience, much more complex shapes can exist created.

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

Quadratic Bezier curves

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

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // Quadratic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  fifty                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  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 example draws a heart using cubic Bézier curves.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  lxx                  ,                  25                  ,                  fifty                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  20                  ,                  62.5                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  40                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  fourscore                  ,                  130                  ,                  62.v                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }

Rectangles

In improver to the three methods nosotros saw in Drawing rectangles, which draw rectangular shapes direct to the canvas, in that location's also the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

And so far, each example on this folio has used only ane blazon of path part per shape. Nevertheless, there'south no limitation to the number or types of paths y'all can apply to create a shape. So in this last instance, let'due south combine all of the path functions to brand a set of very famous game characters.

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

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

The resulting paradigm looks like this:

Nosotros won't get over this in detail, since information technology's really surprisingly uncomplicated. The most important things to annotation are the employ of the fillStyle property on the cartoon context, and the use of a utility office (in this instance roundedRect()). Using utility functions for bits of drawing y'all do often tin can be very helpful and reduce the amount of code you need, as well every bit its complexity.

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

Path2D objects

As we have seen in the last example, there can exist a series of paths and cartoon commands to draw objects onto your canvass. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets you enshroud or tape these drawing commands. You are able to play back your paths chop-chop. Let'due south run across how we can construct a Path2D object:

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

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

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

The Path2D API also adds a mode to combine paths using the addPath method. This tin can 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, we are creating a rectangle and a circle. Both are stored as a Path2D object, then that they are bachelor for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the electric current path. Here, stroke and fill are used with a path argument to draw both objects onto the canvas, for example.

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

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

Using SVG paths

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

The path volition move to indicate (M10 10) and then motion horizontally fourscore points to the correct (h eighty), and so 80 points down (5 80), so 80 points to the left (h -lxxx), and then back to the start (z). You can run across this example on the Path2D constructor page.

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

« Previous
Adjacent »

bauerithad1941.blogspot.com

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