Documentation

Learn all about jCanvas

jCanvas

• Introduction
• Syntax
• jCanvas Object
• Extending jCanvas
• Properties
• Methods

Canvas

• Clear Canvas
• Rotate Canvas
• Scale Canvas
• Translate Canvas
• Pixel Manipulation
• Get Canvas Image
• Draw Manually
• Detect Pixel Ratio

Drawings

• Arcs
• Arrows
• Curves
• Ellipses
• Images
• Lines
• Masking
• Paths
• Polygons
• Rectangles
• Slices
• Text
• Vectors

Layers

• Layer API
• Adding layers
• Retrieving layers
• Drawing layers
• Manipulating Layers
• Animating layers

Events

• Event API
• Mouse Events
• Mechanical Events
• Event Properties
• Draggable Layers
• Touch Events
• Event Hooks

Styles

• Colors
• Shadows
• Gradients
• Patterns
• Functions

Polygons

The drawPolygon() method creates a regular (equal-angled) polygon.

// Draw a triangle
$('canvas').drawPolygon({
  strokeStyle: 'black',
  strokeWidth: 4,
  x: 200, y: 100,
  radius: 50,
  sides: 3
});

// Draw a polygon
$('canvas').drawPolygon({
  fillStyle: '#589',
  strokeStyle: '#000',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  rotate: 25
});

Concave Polygons

To create concave polygons (polygons that point inward), include the concavity property.

• A value greater than 0 will cause the sides to point inward.
• A value less than 0 will cause the sides to point outward.
• A value equal to 0 does not project at all.
• A value of 1 will render the polygon invisible, because the sides will point in completely.

// Draw a star
$('canvas').drawPolygon({
  fillStyle: '#36c',
  x: 100, y: 100,
  radius: 50,
  sides: 5,
  concavity: 0.5
});

// Draw a badge-like shape
$('canvas').drawPolygon({
  fillStyle: '#3c6',
  strokeStyle: '#083',
  x: 100, y: 100,
  radius: 50,
  sides: 50,
  concavity: 0.1
});

// Draw a shield-like shape
$('canvas').drawPolygon({
  fillStyle: '#36c',
  strokeStyle: '#f60',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  sides: 3,
  concavity: -0.5,
  rotate: 180
});