Javascript Draw Circle Without Canvas

Drawing shapes with canvas

« Previous
Next »

Now that we have fix our canvass environment, nosotros can get into the details of how to depict on the canvas. Past the cease of this article, you will take learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be washed.

The grid

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

Normally 1 unit in the grid corresponds to ane pixel on the canvas. 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 height left corner of the bluish square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial nosotros'll come across how we can translate the origin to a unlike position, rotate the grid and even scale it, but for at present we'll stick to the default.

Drawing rectangles

Dissimilar SVG, <canvas> just supports ii primitive shapes: rectangles and paths (lists of points connected past lines). All other shapes must be created by combining one or more paths. Luckily, we take an assortment of path drawing functions which make it possible to etch very complex shapes.

First let's look at the rectangle. In that location are 3 functions that describe rectangles on the canvass:

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

Each of these iii 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 acme provide the rectangle's size.

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

Rectangular shape example

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

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

This instance's output is shown below.

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

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

Dissimilar the path functions nosotros'll see in the next section, all three rectangle functions draw immediately to the sail.

Drawing paths

Now let's look at paths. A path is a list 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 be airtight. To brand shapes using paths, we take some extra steps:

First, y'all create the path.
Then yous use drawing commands to draw into the path.
Once the path has been created, you can stroke or make full 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 different paths for objects.
closePath(): Adds a directly line to the path, going to the start of the current sub-path.
stroke(): Draws the shape past stroking its outline.
fill(): Draws a solid shape by filling the path's content expanse.

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

Annotation: When the electric current path is empty, such as immediately later on calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what information technology actually is. For that reason, yous will most always desire to specifically set your starting position later on resetting a path.

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

The third, and an optional pace, is to call closePath(). This method tries to close the shape by drawing a direct line from the current betoken to the commencement. If the shape has already been closed or there's just 1 point in the list, this role does nothing.

Note: When you call fill up(), whatsoever open shapes are airtight automatically, so you don't take to call closePath(). This is non the case when you call stroke().

Drawing a triangle

For example, the code for drawing a triangle would await something similar this:

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  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 upshot looks like this:

Moving the pen

One very useful function, which doesn't actually describe anything but becomes part of the path listing described above, is the moveTo() role. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

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

When the canvas is initialized or beginPath() is chosen, you lot typically will want to apply the moveTo() role to place the starting point somewhere else. Nosotros could also utilise moveTo() to draw unconnected paths. Have a look at the smiley face below.

To try this for yourself, yous can use the code snippet below. Only paste it into the depict() function we saw earlier.

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

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

The issue looks like this:

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

Note: To larn more most the arc() role, see the Arcs section below.

Lines

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

lineTo(10, 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'southward end point. The starting point is dependent on previously fatigued paths, where the cease point of the previous path is the starting bespeak for the following, etc. The starting signal can also be changed past using the moveTo() method.

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

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

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

This starts past calling beginPath() to start a new shape path. Nosotros then utilise the moveTo() method to motion the starting bespeak to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

You'll observe the difference betwixt the filled and stroked triangle. This is, equally mentioned above, because shapes are automatically airtight when a path is filled, but non when they are stroked. If we left out the closePath() for the stroked triangle, only 2 lines would have been drawn, not a complete triangle.

Arcs

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

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

Permit's have a more detailed await at the arc method, which takes six parameters: x and y are the coordinates of the heart of the circle on which the arc should exist fatigued. radius is cocky-explanatory. The startAngle and endAngle parameters define the showtime and end points of the arc in radians, forth the bend of the circumvolve. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following case is a lilliputian more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.

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

The ten and y coordinates should be articulate enough. radius and startAngle are stock-still. The endAngle starts at 180 degrees (one-half a circle) in the commencement cavalcade and is increased by steps of xc degrees, culminating in a complete circle in the terminal column.

The argument for the clockwise parameter results in the get-go and third row beingness drawn every bit clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the pinnacle 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                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  4                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  ten                  =                  25                  +                  j                  *                  50                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  l                  ;                  // y coordinate                  var                  radius                  =                  twenty                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Stop signal on circle                  var                  counterclockwise                  =                  i                  %                  two                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  make full                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier curve from the current pen position to the stop point specified past ten and y, using the control point specified past cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the current pen position to the end betoken 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 start and an finish bespeak (blueish dots) and just 1 control point (indicated by the cherry-red dot) while a cubic Bézier curve uses two control points.

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

Using quadratic and cubic Bézier curves can be quite challenging, because dissimilar vector drawing software like Adobe Illustrator, we don't accept direct visual feedback every bit to what we're doing. This makes information technology pretty hard to draw complex shapes. In the following case, we'll be cartoon some simple organic shapes, merely if you have the fourth dimension and, most of all, the patience, much more circuitous shapes tin can be created.

In that location'south nothing very difficult in these examples. In both cases nosotros see a succession of curves existence drawn which finally result in a consummate shape.

Quadratic Bezier curves

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

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

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

Cubic Bezier curves

This case draws a centre using cubic Bézier curves.

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

                                  part                  depict                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // Cubic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  lxx                  ,                  25                  ,                  l                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  xx                  ,                  62.5                  ,                  xx                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  twenty                  ,                  80                  ,                  xl                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  eighty                  ,                  130                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.v                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  40                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

In addition to the three methods we saw in Cartoon rectangles, which draw rectangular shapes directly to the canvas, in that location'south also the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

So far, each example on this page has used only one blazon of path function per shape. However, there'due south no limitation to the number or types of paths you can use to create a shape. So in this final example, allow's combine all of the path functions to make a fix of very famous game characters.

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

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

The resulting epitome looks like this:

We won't go over this in particular, since it'southward really surprisingly elementary. The most important things to notation are the utilize of the fillStyle property on the cartoon context, and the apply of a utility function (in this case roundedRect()). Using utility functions for bits of cartoon you lot do often can be very helpful and reduce the amount of code you need, as well as 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 up color for paths from the default color of black to white, and and so dorsum again.

Path2D objects

Equally we have seen in the last example, there can exist a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to ameliorate performance, the Path2D object, bachelor in recent versions of browsers, lets y'all cache or record these drawing commands. Yous are able to play back your paths apace. Allow's run into how we tin can construct a Path2D object:

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

                                  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 we got to know above, are bachelor on Path2D objects.

The Path2D API likewise adds a way to combine paths using the addPath method. This can exist useful when you want to build objects from several components, for case.

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

Path2D example

In this instance, nosotros are creating a rectangle and a circle. Both are stored equally a Path2D object, and then 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 electric current path. Here, stroke and fill are used with a path argument to draw both objects onto the sail, for example.

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  10                  ,                  50                  ,                  50                  )                  ;                  var                  circumvolve                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  2                  *                  Math.                  PI                  )                  ;                  ctx.                  stroke                  (rectangle)                  ;                  ctx.                  fill                  (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 permit yous to pass around path data and re-use them in both, SVG and canvas.

The path will move to point (M10 10) and then move horizontally 80 points to the right (h 80), then eighty points downwards (v eighty), and so lxxx points to the left (h -lxxx), and then back to the start (z). Yous can see this instance on the Path2D constructor page.

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

« Previous
Adjacent »

seewatich35.blogspot.com

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

See Watich35