Paths E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

context.beginPath ();

  • Resets the current path.

context.moveTo (x, y);

  • Creates a new subpath with the given point.

context.closePath ();

  • Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

context.lineTo (x, y);

  • Adds the given point to the current subpath, connected to the previous one by a straight line.

context.quadraticCurveTo (cpx, cpy, x, y);

  • Adds the given point to the current path, connected to the previous one by a quadratic Bezier curve with the given control point.

context.bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y);

  • Adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.

context.arcTo (x1, y1, x2, y2, radius);

  • Adds a point to the current path, connected to the previous one by a straight line, then adds a second point to the current path, connected to the previous one by an arc whose properties are described by the arguments.
  • radius is measured in pixels.
  • Throws an INDEX_SIZE_ERR p63 exception if the given radius is negative.

context.arc (x, y, radius, startAngle, endAngle, anticlockwise);

  • Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line.
  • radius is measured in pixels.
  • startAngle and endAngle are measured in radians, given by the formula radians = degrees * Pi / 180.
  • anticlockwise can be either 'false' or 'true'.
  • Throws an INDEX_SIZE_ERR p63 exception if the given radius is negative.

context.rect (x, y, w, h);

  • Adds a new closed subpath to the path, representing the given rectangle.

context.fill ();

  • Fills the subpaths with the current fill style.

context.stroke ();

  • Strokes the subpaths with the current stroke style.

context.clip ();

  • Further constrains the clipping region to the given path.

context.isPointInPath (x, y);

  • Returns true if the given point is in the current path.

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// Draw two sides of a triangle.
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(80, 20);
ctx.lineTo(40, 80);
ctx.lineTo(120, 80);
ctx.stroke();


// Draw the same two sides of the triangle and use closePath
// to close the shape, then fill it..
ctx.beginPath();
ctx.strokeStyle	= "#000000";
ctx.fillStyle = "#FF8000";
ctx.moveTo(240, 20);
ctx.lineTo(200, 80);
ctx.lineTo(280, 80);
ctx.closePath();
ctx.fill();
ctx.stroke();

// A quadratic curve fish
var x = 20;
var y = 150;
ctx.lineWidth = 2;
ctx.fillStyle = "#80FF00";
ctx.beginPath();
ctx.moveTo(x, y);
ctx.quadraticCurveTo(x + 50, y - 80, x + 90, y - 10);
ctx.quadraticCurveTo(x + 100, y - 10, x + 115, y - 40);
ctx.quadraticCurveTo(x + 115, y, x + 115, y + 40);
ctx.quadraticCurveTo(x + 100, y + 10, x + 90, y + 10);
ctx.quadraticCurveTo(x + 50, y + 80, x, y);
ctx.closePath();
ctx.fill();
ctx.stroke();

// A bezier curve heart
x = 215;
y = 100;
ctx.lineWidth = 2;
ctx.fillStyle = "#8080FF";
ctx.beginPath();
ctx.moveTo(x + 25, y + 25);
ctx.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y);
ctx.bezierCurveTo(x - 30, y, x - 30, y + 35,x - 30,y + 35);
ctx.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95);
ctx.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35);
ctx.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y);
ctx.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25);
ctx.closePath();
ctx.fill();
ctx.stroke();

// Use context clip to create a circular clipping region,
// then draw a square over it. Due to the clipping, only 
// a circlular region will be rendered.
x = 80;
y = 280;

// Save the canvas state
ctx.save();

// Draw a circle and set it as the clipping region
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI, 0);
ctx.clip();

// Draw a rectangle and fill it
ctx.fillStyle = "#FF2080";
ctx.beginPath();
ctx.rect(x - 44, y - 45, 90, 90);
ctx.fill();

// Restore the drawing state, clearing the clipping region
ctx.restore();

// Stroke the rectange so we can see what it would have
// been filled if there had been no clipping region
ctx.stroke();