Simple Drawing Program Shapes Circle Rectangle

Cartoon shapes with canvass

« Previous
Side by side »

At present that we have fix upwards our sheet environment, we tin can become into the details of how to draw on the canvas. By the end of this article, yous volition accept learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvass and we volition see how that can be washed.

The grid

Before we tin offset drawing, we need to talk about the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvass element 150 pixels wide and 150 pixels high.

Ordinarily 1 unit of measurement in the grid corresponds to one pixel on the canvass. The origin of this filigree is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the height left corner of the blue square becomes x pixels from the left and y pixels from the elevation, at coordinate (ten,y). Afterwards in this tutorial we'll see how we tin can translate the origin to a different position, rotate the filigree and even scale it, simply for now nosotros'll stick to the default.

Cartoon rectangles

Unlike SVG, <sail> but supports two primitive shapes: rectangles and paths (lists of points continued by lines). All other shapes must exist created by combining one or more paths. Luckily, we have an assortment of path cartoon functions which make it possible to compose very circuitous shapes.

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

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

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

Below is the describe() office from the previous page, but now it is making utilise of these three functions.

Rectangular shape case

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

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

This example's output is shown below.

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

In upcoming pages we'll see 2 alternative methods for clearRect(), and we'll likewise encounter how to change the color and stroke way of the rendered shapes.

Unlike the path functions nosotros'll encounter in the next section, all 3 rectangle functions describe immediately to the sheet.

Cartoon paths

Now let'due south await at paths. A path is a listing of points, connected past segments of lines that can be of different shapes, curved or not, of different width and of unlike color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:

First, y'all create the path.
And so y'all use drawing commands to draw into the path.
In one case the path has been created, you can stroke or fill the path to render information technology.

Here are the functions used to perform these steps:

beginPath(): Creates a new path. Once created, time to come drawing commands are directed into the path and used to build the path up.
Path methods: Methods to set unlike paths for objects.
closePath(): Adds a straight line to the path, going to the outset of the electric current sub-path.
stroke(): Draws the shape by stroking its outline.
fill(): Draws a solid shape past filling the path'due south content expanse.

The start 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 grade a shape. Every time this method is called, the list is reset and we can start cartoon new shapes.

Notation: When the current path is empty, such as immediately later calling beginPath(), or on a newly created canvas, the start path construction control is always treated every bit a moveTo(), regardless of what information technology really is. For that reason, you will almost always want to specifically set up your starting position after resetting a path.

The 2nd step is calling the methods that actually specify the paths to be fatigued. Nosotros'll meet these before long.

The third, and an optional step, is to phone call closePath(). This method tries to close the shape by drawing a straight line from the electric current point to the offset. If the shape has already been closed or there's only ane point in the list, this function does nothing.

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

Drawing a triangle

For case, the lawmaking for drawing a triangle would look something like this:

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

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

The event looks similar this:

Moving the pen

One very useful part, which doesn't really draw anything simply becomes part of the path list described above, is the moveTo() function. Y'all can probably best call back of this every bit lifting a pen or pencil from one spot on a slice of paper and placing it on the adjacent.

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

When the canvas is initialized or beginPath() is chosen, y'all typically will want to use the moveTo() function to place the starting point somewhere else. We could likewise employ moveTo() to depict unconnected paths. Have a look at the smiley face below.

To try this for yourself, you can use the code snippet below. Merely paste it into the describe() office we saw before.

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

                                  function                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'sail'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  '2d'                  )                  ;                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  fifty                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  true                  )                  ;                  // Outer circle                  ctx.                  moveTo                  (                  110                  ,                  75                  )                  ;                  ctx.                  arc                  (                  75                  ,                  75                  ,                  35                  ,                  0                  ,                  Math.                  PI                  ,                  imitation                  )                  ;                  // Mouth (clockwise)                  ctx.                  moveTo                  (                  65                  ,                  65                  )                  ;                  ctx.                  arc                  (                  60                  ,                  65                  ,                  5                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Left middle                  ctx.                  moveTo                  (                  95                  ,                  65                  )                  ;                  ctx.                  arc                  (                  xc                  ,                  65                  ,                  five                  ,                  0                  ,                  Math.                  PI                  *                  2                  ,                  truthful                  )                  ;                  // Right eye                  ctx.                  stroke                  (                  )                  ;                  }                  }

The consequence looks like this:

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

Note: To learn more than virtually the arc() office, see the Arcs section below.

Lines

For cartoon direct lines, apply the lineTo() method.

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

This method takes two arguments, x and y, which are the coordinates of the line'due south end betoken. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the post-obit, etc. The starting signal can also exist changed by using the moveTo() method.

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

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

                                  function                  depict                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sheet.                  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. Nosotros then apply the moveTo() method to move the starting point to the desired position. Beneath this, two lines are fatigued which brand up two sides of the triangle.

You'll find the difference between the filled and stroked triangle. This is, every bit mentioned above, because shapes are automatically closed when a path is filled, merely not when they are stroked. If we left out the closePath() for the stroked triangle, merely 2 lines would have been drawn, non 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 (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 command points and radius, connected to the previous point by a direct line.

Let's have a more detailed expect at the arc method, which takes vi parameters: 10 and y are the coordinates of the heart of the circle on which the arc should exist drawn. 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 circumvolve. These are measured from the x axis. The counterclockwise parameter is a Boolean value which, when truthful, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.

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

The following instance is a little more circuitous than the ones we've seen above. It draws 12 unlike arcs all with different angles and fills.

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

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

The argument for the clockwise parameter results in the first and third row beingness fatigued as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top one-half stroked arcs and the bottom one-half filled arcs.

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

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

                                  function                  draw                  (                  )                  {                  var                  sail                  =                  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                  ten                  =                  25                  +                  j                  *                  fifty                  ;                  // x coordinate                  var                  y                  =                  25                  +                  i                  *                  l                  ;                  // y coordinate                  var                  radius                  =                  twenty                  ;                  // Arc radius                  var                  startAngle                  =                  0                  ;                  // Starting betoken on circumvolve                  var                  endAngle                  =                  Math.                  PI                  +                  (Math.                  PI                  *                  j)                  /                  2                  ;                  // Cease point on circumvolve                  var                  counterclockwise                  =                  i                  %                  2                  !==                  0                  ;                  // clockwise or counterclockwise                  ctx.                  arc                  (ten,                  y,                  radius,                  startAngle,                  endAngle,                  counterclockwise)                  ;                  if                  (i                  >                  1                  )                  {                  ctx.                  fill                  (                  )                  ;                  }                  else                  {                  ctx.                  stroke                  (                  )                  ;                  }                  }                  }                  }                  }

Bezier and quadratic curves

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

quadraticCurveTo(cp1x, cp1y, ten, y): Draws a quadratic Bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 10, y): Draws a cubic Bézier bend from the current pen position to the finish point specified by x and y, using the command points specified by (cp1x, cp1y) and (cp2x, cp2y).

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

The x and y parameters in both of these methods are the coordinates of the end signal. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the 2d control point.

Using quadratic and cubic Bézier curves can exist quite challenging, because dissimilar vector drawing software similar Adobe Illustrator, nosotros don't have direct visual feedback as to what we're doing. This makes it pretty hard to describe complex shapes. In the following case, nosotros'll be drawing some simple organic shapes, but if you have the fourth dimension and, most of all, the patience, much more circuitous shapes tin be created.

There's zilch very difficult in these examples. In both cases we come across a succession of curves being drawn which finally issue in a consummate shape.

Quadratic Bezier curves

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

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

                                  function                  draw                  (                  )                  {                  var                  sheet                  =                  document.                  getElementById                  (                  'canvass'                  )                  ;                  if                  (canvass.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                  ,                  l                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  l                  ,                  120                  ,                  xxx                  ,                  125                  )                  ;                  ctx.                  quadraticCurveTo                  (                  60                  ,                  120                  ,                  65                  ,                  100                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  100                  ,                  125                  ,                  62.five                  )                  ;                  ctx.                  quadraticCurveTo                  (                  125                  ,                  25                  ,                  75                  ,                  25                  )                  ;                  ctx.                  stroke                  (                  )                  ;                  }                  }

Cubic Bezier curves

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

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

                                  role                  draw                  (                  )                  {                  var                  canvas                  =                  document.                  getElementById                  (                  'canvas'                  )                  ;                  if                  (canvas.getContext)                  {                  var                  ctx                  =                  sail.                  getContext                  (                  'second'                  )                  ;                  // Cubic curves instance                  ctx.                  beginPath                  (                  )                  ;                  ctx.                  moveTo                  (                  75                  ,                  twoscore                  )                  ;                  ctx.                  bezierCurveTo                  (                  75                  ,                  37                  ,                  seventy                  ,                  25                  ,                  l                  ,                  25                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  25                  ,                  20                  ,                  62.5                  ,                  20                  ,                  62.5                  )                  ;                  ctx.                  bezierCurveTo                  (                  20                  ,                  80                  ,                  40                  ,                  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                  ,                  xl                  )                  ;                  ctx.                  fill                  (                  )                  ;                  }                  }

Rectangles

In addition to the three methods we saw in Cartoon rectangles, which describe rectangular shapes directly to the sheet, in that location's besides the rect() method, which adds a rectangular path to a currently open up path.

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

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

Making combinations

So far, each instance on this page has used only one type of path function per shape. However, there'southward no limitation to the number or types of paths you lot tin apply to create a shape. So in this final example, let'southward combine all of the path functions to make a set of very famous game characters.

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

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

The resulting image looks similar this:

We won't go over this in detail, since it's actually surprisingly simple. The nearly important things to note are the utilise of the fillStyle belongings on the drawing context, and the use of a utility function (in this example roundedRect()). Using utility functions for bits of cartoon you do ofttimes tin be very helpful and reduce the amount of lawmaking yous need, as well as its complexity.

We'll take another look at fillStyle, in more than detail, later in this tutorial. Here, all we're doing is using it to modify the make full colour for paths from the default colour of black to white, and then back once again.

Path2D objects

As we take seen in the concluding example, there tin be a serial of paths and drawing commands to depict objects onto your sail. To simplify the code and to improve performance, the Path2D object, available in recent versions of browsers, lets you cache or record these drawing commands. Yous are able to play back your paths quickly. Let'south see how we can construct a Path2D object:

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

                                  new                  Path2D                  (                  )                  ;                  // empty path object                  new                  Path2D                  (path)                  ;                  // re-create 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 in a higher place, are available on Path2D objects.

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

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

Path2D example

In this example, we are creating a rectangle and a circle. Both are stored as a Path2D object, then that they are available for subsequently usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to apply instead of the current path. Here, stroke and fill are used with a path argument to describe both objects onto the sail, for instance.

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

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

Using SVG paths

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

The path will motility to point (M10 x) and and so move horizontally 80 points to the right (h 80), then lxxx points down (v lxxx), and then 80 points to the left (h -80), and and so back to the start (z). Yous can come across this example on the Path2D constructor folio.

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

« Previous
Next »

scheythistoll.blogspot.com

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

Schey Thistoll