Can Draw Circles and Squares but Not a Triangle

Drawing shapes with sheet

« Previous
Next »

Now that nosotros have ready our canvas environment, we can get into the details of how to draw on the canvass. By the end of this article, you volition have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when drawing objects onto the sail and we will see how that tin can be done.

The filigree

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

Commonly one unit in the grid corresponds to 1 pixel on the sail. The origin of this grid is positioned in the elevation left corner at coordinate (0,0). All elements are placed relative to this origin. Then the position of the peak left corner of the blue square becomes x pixels from the left and y pixels from the tiptop, at coordinate (x,y). Later in this tutorial we'll see how we can translate the origin to a dissimilar position, rotate the grid and even scale it, simply for now we'll stick to the default.

Drawing rectangles

Unlike SVG, <sheet> only supports two primitive shapes: rectangles and paths (lists of points continued past lines). All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make information technology possible to compose very complex shapes.

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

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

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

Below is the draw() role from the previous page, merely at present it is making use of these 3 functions.

Rectangular shape instance

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

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

This case's output is shown below.

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

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

Unlike the path functions nosotros'll encounter in the next section, all three rectangle functions draw immediately to the canvas.

Cartoon paths

Now let'southward look at paths. A path is a list of points, connected by segments of lines that can exist of different shapes, curved or not, of different width and of different colour. A path, or fifty-fifty a subpath, can be airtight. To make shapes using paths, we take some extra steps:

First, yous create the path.
And so you use drawing commands to draw into the path.
Once the path has been created, you tin stroke or fill the path to render it.

Here are the functions used to perform these steps:

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

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

Annotation: When the current path is empty, such every bit immediately afterwards calling beginPath(), or on a newly created canvas, the offset path construction control is always treated equally a moveTo(), regardless of what it actually is. For that reason, you lot will nigh always want to specifically gear up your starting position after resetting a path.

The 2d step is calling the methods that actually specify the paths to be drawn. We'll see these presently.

The third, 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 starting time. If the shape has already been closed or in that location's only one betoken in the list, this function does nothing.

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

Drawing a triangle

For case, the code for drawing a triangle would await something like this:

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

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

The event looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveTo() function. You can probably all-time think of this as 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 past ten and y.

When the canvas is initialized or beginPath() is chosen, you typically volition want to use the moveTo() function to place the starting point somewhere else. Nosotros could likewise use moveTo() to draw unconnected paths. Take a look at the smiley face up beneath.

To try this for yourself, you can use the code snippet below. But paste information technology into the draw() role we saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  if                  (sail.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  50                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  false                  )                  ;                  // Oral fissure (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  threescore                  ,                  65                  ,                  v                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Left centre                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  ii                  ,                  true                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The upshot looks like this:

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

Note: To larn more nearly the arc() function, see the Arcs department below.

Lines

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

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

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

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

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

                                  function                  depict                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'sheet'                  )                  ;                  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 by calling beginPath() to starting time a new shape path. We then use the moveTo() method to move 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 between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only ii lines would have been drawn, not a consummate triangle.

Arcs

To draw 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 control points and radius, connected to the previous indicate by a straight line.

Let'south have a more detailed look 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 exist fatigued. radius is self-explanatory. The startAngle and endAngle parameters define the start and stop points of the arc in radians, along the curve of the circle. These are measured from the x centrality. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

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

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

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

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

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

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  four                  ;                  i++                  )                  {                  for                  (                  var                  j                  =                  0                  ;                  j                  <                  3                  ;                  j++                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  var                  x                  =                  25                  +                  j                  *                  50                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  fifty                  ;                  // y coordinate                  var                  radius                  =                  20                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting point on circle                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // End signal on circle                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (x,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  one                  )                  {                  ctx.                  make full                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

The side by side type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw circuitous organic shapes.

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

The difference betwixt these is that a quadratic Bézier curve has a start and an end point (blue dots) and merely one control betoken (indicated by the blood-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 betoken. cp1x and cp1y are the coordinates of the starting time control point, and cp2x and cp2y are the coordinates of the 2nd command indicate.

Using quadratic and cubic Bézier curves can be quite challenging, because dissimilar vector drawing software like Adobe Illustrator, nosotros don't take direct visual feedback equally to what nosotros're doing. This makes it pretty difficult to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, just if yous have the time and, most of all, the patience, much more circuitous shapes tin can be created.

At that place'southward nothing very difficult in these examples. In both cases we meet a succession of curves existence drawn which finally consequence in a complete shape.

Quadratic Bezier curves

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

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

                                  office                  depict                  (                  )                  {                  var                  sail                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Quadratic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  25                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  25                  ,                  25                  ,                  62.5                  )                  ;                  ctx.                  quadraticCurveTo                  (                  25                  ,                  100                  ,                  50                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  50                  ,                  120                  ,                  thirty                  ,                  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 case draws a heart using cubic Bézier curves.

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

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

Rectangles

In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes straight to the canvass, there's also the rect() method, which adds a rectangular path to a currently open path.

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

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

Making combinations

So far, each example on this page has used simply one blazon of path function per shape. Notwithstanding, there's no limitation to the number or types of paths y'all tin can employ to create a shape. And then in this final example, let's combine all of the path functions to make a set up of very famous game characters.

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

                                  function                  depict                  (                  )                  {                  var                  sail                  =                  certificate.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  roundedRect                  (ctx,                  12                  ,                  12                  ,                  150                  ,                  150                  ,                  xv                  )                  ;                  roundedRect                  (ctx,                  19                  ,                  19                  ,                  150                  ,                  150                  ,                  nine                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  53                  ,                  119                  ,                  49                  ,                  16                  ,                  half-dozen                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  x                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  seven                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  sixteen                  ,                  35                  ,                  4                  ,                  four                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  vi                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  four                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  viii                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  16                  ,                  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                  ,                  two                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }                  // A utility function to depict a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    height,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (ten,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  top,                  x                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y                  +                  height,                  x                  +                  width,                  y                  +                  elevation                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (x                  +                  width,                  y,                  10                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (ten,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting epitome looks like this:

We won't go over this in detail, since information technology's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the cartoon context, and the use of a utility role (in this case roundedRect()). Using utility functions for bits of drawing yous do often can be very helpful and reduce the amount of code y'all need, too as its complexity.

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

Path2D objects

Equally we have seen in the last example, at that place can exist a serial of paths and drawing commands to draw objects onto your sheet. To simplify the code and to amend performance, the Path2D object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play dorsum your paths quickly. Let's see 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 some other Path2D object                  new                  Path2D                  (d)                  ;                  // path from SVG path data

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

The Path2D API also adds a fashion to combine paths using the addPath method. This can exist useful when you desire to build objects from several components, for example.

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

Path2D example

In this example, nosotros are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Hither, stroke and fill are used with a path argument to draw both objects onto the canvas, for case.

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

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

Using SVG paths

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

The path will movement to point (M10 x) and then move horizontally 80 points to the right (h eighty), then fourscore points down (v 80), and then eighty points to the left (h -80), and then back to the first (z). You tin see this case on the Path2D constructor page.

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

« Previous
Next »

dominguezwitchany82.blogspot.com

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