Clear Box With White Border Drawing 2d Rectangle

Drawing shapes with sail

« Previous
Next »

Now that nosotros take set up our canvas surroundings, we can get into the details of how to draw on the canvas. Past the end of this commodity, yous will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and nosotros volition see how that can be done.

The grid

Earlier we can start drawing, we demand to talk about the sheet filigree or coordinate infinite. Our HTML skeleton from the previous page had a sheet element 150 pixels wide and 150 pixels high.

Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the acme left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the meridian left corner of the blueish square becomes 10 pixels from the left and y pixels from the top, at coordinate (x,y). Later in this tutorial we'll see how we tin translate the origin to a unlike position, rotate the grid and even scale it, but for now nosotros'll stick to the default.

Drawing rectangles

Unlike SVG, <sail> only supports two archaic shapes: rectangles and paths (lists of points continued by lines). All other shapes must be created by combining one or more than paths. Luckily, nosotros have an array of path drawing functions which make information technology possible to etch very complex shapes.

First allow'southward look at the rectangle. In that location are iii functions that describe rectangles on the sail:

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

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

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

Rectangular shape case

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

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

This example's output is shown below.

The fillRect() function draws a big blackness foursquare 100 pixels on each side. The clearRect() function and then erases a 60x60 pixel square from the eye, 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 mode of the rendered shapes.

Dissimilar the path functions we'll come across in the next section, all three rectangle functions draw immediately to the canvas.

Drawing paths

Now allow's await 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, tin can be closed. To make shapes using paths, we take some extra steps:

First, you create the path.
And so you employ cartoon commands to draw into the path.
One time the path has been created, you tin can stroke or fill the path to render information technology.

Here are the functions used to perform these steps:

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

The first step to create a path is to call the beginPath(). Internally, paths are stored every bit 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 can beginning drawing new shapes.

Note: When the electric current path is empty, such as immediately after calling beginPath(), or on a newly created sheet, the kickoff path construction control is always treated equally a moveTo(), regardless of what it really is. For that reason, y'all will almost e'er want to specifically set your starting position after resetting a path.

The second step is calling the methods that actually specify the paths to exist drawn. We'll run across these before long.

The third, and an optional step, is to telephone call closePath(). This method tries to shut the shape by drawing a straight line from the electric current signal to the starting time. If the shape has already been closed or there'due south but ane point in the list, this role does cypher.

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

Drawing a triangle

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

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2nd'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  l                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  75                  )                  ;                  ctx.                  lineTo                  (                  100                  ,                  25                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

The result looks like this:

Moving the pen

One very useful role, which doesn't actually draw annihilation only becomes part of the path list described above, is the moveTo() office. You tin probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing information technology on the side by side.

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

When the sail is initialized or beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere else. Nosotros could also utilise moveTo() to draw unconnected paths. Take a look at the smiley confront beneath.

To effort this for yourself, you tin can employ the code snippet below. Just paste it into the draw() function we saw earlier.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (sheet.getContext)                  {                  var                  ctx                  =                  canvas.                  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                  ,                  fake                  )                  ;                  // Oral cavity (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  lx                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  two                  ,                  true                  )                  ;                  // Left eye                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  90                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The result looks like this:

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

Annotation: To learn more about the arc() part, see the Arcs department below.

Lines

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

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

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

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvass.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  'second'                  )                  ;                  // 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 start a new shape path. We then use the moveTo() method to motion the starting indicate to the desired position. Below this, 2 lines are drawn which make up two sides of the triangle.

Y'all'll notice the difference betwixt 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, merely ii lines would have been fatigued, not a consummate triangle.

Arcs

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

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

Let'south accept a more detailed wait at the arc method, which takes vi parameters: x and y are the coordinates of the centre of the circle on which the arc should exist drawn. radius is self-explanatory. The startAngle and endAngle parameters ascertain the kickoff and terminate points of the arc in radians, along the curve of the circle. 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 fatigued clockwise.

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

The following example is a little more complex than the ones we'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 code, each of the parameters for the arc is in a variable for clarity, simply you wouldn't necessarily practice that in real life.

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

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

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

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

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

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, x, y): Draws a quadratic Bézier bend from the current pen position to the end point specified by ten and y, using the control point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): Draws a cubic Bézier curve from the current pen position to the end signal 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 end point (blue dots) and just 1 command point (indicated by the reddish dot) while a cubic Bézier curve uses 2 control points.

The x and y parameters in both of these methods are the coordinates of the cease point. cp1x and cp1y are the coordinates of the offset control betoken, and cp2x and cp2y are the coordinates of the 2d control point.

Using quadratic and cubic Bézier curves tin can be quite challenging, considering unlike vector drawing software similar Adobe Illustrator, we don't take direct visual feedback as to what we're doing. This makes it pretty hard to describe complex shapes. In the following example, nosotros'll be drawing some uncomplicated organic shapes, just if you have the time and, well-nigh of all, the patience, much more than complex shapes can exist created.

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

Quadratic Bezier curves

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

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

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

Cubic Bezier curves

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

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

                                  part                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvas.                  getContext                  (                  '2d'                  )                  ;                  // Cubic curves example                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  40                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  70                  ,                  25                  ,                  l                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  25                  ,                  20                  ,                  62.v                  ,                  twenty                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  xx                  ,                  80                  ,                  forty                  ,                  102                  ,                  75                  ,                  120                  )                  ;                  ctx.                  bezierCurveTo                  (                  110                  ,                  102                  ,                  130                  ,                  80                  ,                  130                  ,                  62.five                  )                  ;                  ctx.                  bezierCurveTo                  (                  130                  ,                  62.5                  ,                  130                  ,                  25                  ,                  100                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  85                  ,                  25                  ,                  75                  ,                  37                  ,                  75                  ,                  forty                  )                  ;                  ctx.                  make full                  (                  )                  ;                  }                  }

Rectangles

In addition to the iii methods nosotros saw in Drawing rectangles, which depict rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

rect(ten, y, width, superlative): Draws a rectangle whose elevation-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 (10,y). In other words, the current pen position is automatically reset to the default coordinates.

Making combinations

And so far, each example on this page has used only ane type of path function per shape. However, there's no limitation to the number or types of paths you can employ to create a shape. And so in this final example, let'southward combine all of the path functions to make a set of very famous game characters.

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

                                  part                  describe                  (                  )                  {                  var                  canvas                  =                  certificate.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  canvass.                  getContext                  (                  '2nd'                  )                  ;                  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                  ,                  sixteen                  ,                  six                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  53                  ,                  49                  ,                  33                  ,                  10                  )                  ;                  roundedRect                  (ctx,                  135                  ,                  119                  ,                  25                  ,                  49                  ,                  ten                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  37                  ,                  37                  ,                  13                  ,                  Math.                  PI                  /                  7                  ,                  -Math.                  PI                  /                  7                  ,                  false                  )                  ;                  ctx.                  lineTo                  (                  31                  ,                  37                  )                  ;                  ctx.                  fill                  (                  )                  ;                  for                  (                  var                  i                  =                  0                  ;                  i                  <                  8                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  51                  +                  i                  *                  xvi                  ,                  35                  ,                  iv                  ,                  four                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  vi                  ;                  i++                  )                  {                  ctx.                  fillRect                  (                  115                  ,                  51                  +                  i                  *                  16                  ,                  4                  ,                  4                  )                  ;                  }                  for                  (i                  =                  0                  ;                  i                  <                  8                  ;                  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.                  fill up                  (                  )                  ;                  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                  *                  ii                  ,                  true                  )                  ;                  ctx.                  fill                  (                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  89                  ,                  102                  ,                  2                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  ctx.                  fill up                  (                  )                  ;                  }                  }                  // A utility office to describe a rectangle with rounded corners.                  function                  roundedRect                  (                  ctx,                    x,                    y,                    width,                    tiptop,                    radius                  )                  {                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (x,                  y                  +                  radius)                  ;                  ctx.                  arcTo                  (x,                  y                  +                  peak,                  10                  +                  radius,                  y                  +                  height,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y                  +                  top,                  x                  +                  width,                  y                  +                  height                  -                  radius,                  radius)                  ;                  ctx.                  arcTo                  (10                  +                  width,                  y,                  10                  +                  width                  -                  radius,                  y,                  radius)                  ;                  ctx.                  arcTo                  (x,                  y,                  x,                  y                  +                  radius,                  radius)                  ;                  ctx.                  stroke                  (                  )                  ;                  }

The resulting image looks similar this:

We won't get over this in particular, since it's actually surprisingly simple. The most important things to annotation are the use of the fillStyle holding on the cartoon context, and the use of a utility function (in this instance roundedRect()). Using utility functions for $.25 of drawing you do frequently can be very helpful and reduce the amount of code you need, as well equally its complication.

We'll accept another look at fillStyle, in more particular, afterward in this tutorial. Here, all we're doing is using it to change the fill colour for paths from the default color of black to white, and then back again.

Path2D objects

Equally we accept seen in the last example, there can exist a series of paths and drawing commands to depict objects onto your sail. To simplify the code and to improve performance, the Path2D object, bachelor in contempo versions of browsers, lets yous cache or record these drawing commands. You lot are able to play back your paths chop-chop. Let's run into how we can construct a Path2D object:

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

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

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

The Path2D API also adds a way to combine paths using the addPath method. This can be useful when yous 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 case

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

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  var                  rectangle                  =                  new                  Path2D                  (                  )                  ;                  rectangle.                  rect                  (                  10                  ,                  10                  ,                  50                  ,                  50                  )                  ;                  var                  circumvolve                  =                  new                  Path2D                  (                  )                  ;                  circle.                  arc                  (                  100                  ,                  35                  ,                  25                  ,                  0                  ,                  ii                  *                  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 canvass. This might let y'all to pass effectually path data and re-use them in both, SVG and canvas.

The path will move to point (M10 10) and then motion horizontally 80 points to the correct (h 80), so 80 points down (v 80), then 80 points to the left (h -fourscore), and and so dorsum to the start (z). You lot can see this example on the Path2D constructor folio.

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

« Previous
Side by side »

ashkeelithe.blogspot.com

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

Ash Keelithe