jCanvas

https://projects.calebevans.me/jcanvas/docs
Admin
jCanvas is a jQuery plugin that simplifies drawing shapes, paths, and images on the HTML5 canvas...
Tokens:30,998
Snippets:260
Trust Score:9
Update:11 months ago
Show doc for...
Tokens:
Raw
### Import jCanvas Library

Source: https://projects.calebevans.me/jcanvas/docs/index

Shows two methods for including the jCanvas library in a project. The first uses a standard script tag to load the minified version from a local file. The second demonstrates importing jCanvas within an ES Module environment after installing it via npm.

```html
<script src="jcanvas.min.js"></script>
```

```javascript
import $ from 'jquery';
import 'jcanvas';
```

--------------------------------

### Example: Draw a Heart Shape with jCanvas Plugin

Source: https://projects.calebevans.me/jcanvas/docs/extending

This example shows how to create a `drawHeart()` plugin for jCanvas. It defines properties like `size` and implements the drawing logic using canvas path commands. The snippet also includes how to use the newly created `drawHeart()` method on a canvas element.

```javascript
// Create a drawHeart() method
$.jCanvas.extend({
  name: "drawHeart",
  type: "heart",
  props: {
    size: 0,
  },
  fn: function (ctx, params) {
    const canvas = this,
      width = params.size,
      factor = 0.75,
      height = width * factor,
      angle = PI * (factor * (1 - factor));


    // Enable shape transformation
    $.jCanvas.transformShape(canvas, ctx, params, width, height);


    const x = params.x;
    const y = params.y + width / 8;


    ctx.beginPath();
    ctx.moveTo(x, y + height / 2);
    ctx.arc(x + width / 4, y - height / 2, width / 4, angle, PI, true);
    ctx.arc(x - width / 4, y - height / 2, width / 4, 0, PI - angle, true);
    params.closed = true;
    $.jCanvas.detectEvents(canvas, ctx, params);
    $.jCanvas.closePath(canvas, ctx, params);
  },
});


// Use the drawHeart() method
$('canvas').drawHeart({
  layer: true,
  draggable: true,
  fillStyle: '#f6c',
  x: 160, y: 100,
  size: 140,
  rotate: 30
});
```

--------------------------------

### Draw Disconnected Path with Explicit Curve Start in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/paths

This jCanvas example illustrates drawing a path where a quadratic curve is explicitly defined with its own starting coordinates (x1, y1), causing it to be disconnected from the previous subpath. This is helpful when you need to start a new path segment independently, rather than having it automatically connect to the prior one.

```javascript
$"canvas").drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    x1: 130, y1: 210,
    cx1: 180, cy1: 250,
    x2: 225, y2: 200
  }
});
```

--------------------------------

### Draw Connected Path with Lines and Curves in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/paths

This example demonstrates drawing a connected path using jCanvas's drawPath() method. It combines a line segment and a quadratic curve, where the curve's starting point is implicitly determined by the end of the preceding line. This is useful for creating complex shapes without explicitly defining every coordinate for connected segments.

```javascript
$"canvas").drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    cx1: 175, cy1: 250,
    x2: 225, y2: 200
  }
});
```

--------------------------------

### Scale Text Animation on Canvas with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/text

Enables text scaling on canvas using `scale`, `scaleX`, or `scaleY` properties. Includes an example of animating text scale on click using `animateLayer`.

```javascript
 $('canvas').drawText({
  layer: true,
  fillStyle: '#9cf',
  strokeStyle: '#25a',
  strokeWidth: 2,
  x: 200, y: 100,
  fontSize: '36pt',
  fontFamily: 'Verdana, sans-serif',
  text: 'Hello',
  scale: 2,
  click: function () {
    // Click the text to make it grow
    $(this).animateLayer(
      0,
      {
        scale: '+=0.25'
      },
      250
    );
  }
});
```

--------------------------------

### jCanvas: Accessing Pointer Coordinates with eventX and eventY

Source: https://projects.calebevans.me/jcanvas/docs/eventProperties

Demonstrates how to use `eventX` and `eventY` properties within a jCanvas event callback to get the pointer's coordinates relative to the canvas. These properties are crucial for interactive elements, allowing dynamic adjustments based on mouse or touch position. The example shows a circle becoming more transparent as the user hovers closer to its center.

```javascript
$"canvas").drawArc({
  layer: true,
  fillStyle: '#c33',
  x: 160, y: 200,
  radius: 100,
  mousemove: function (layer) {
    const distX = layer.eventX - layer.x;
    const distY = layer.eventY - layer.y;
    // the distance from the circle's center
    const dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
    layer.opacity = dist / layer.radius;
  }
});
```

--------------------------------

### Create HTML Canvas Element

Source: https://projects.calebevans.me/jcanvas/docs/index

Demonstrates the basic HTML structure for creating a canvas element with specified width and height attributes. The width and height attributes are crucial for defining the canvas's drawing surface accurately, as CSS styling can lead to distortion.

```html
<canvas width="300" height="150"></canvas>
```

--------------------------------

### Draw a Basic Slice with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/slices

Demonstrates how to draw a basic slice of a circle using the drawSlice() method in jCanvas. Key properties include position (x, y), radius, and the start and end angles in degrees that define the slice's arc.

```javascript
$"canvas").drawSlice({
  fillStyle: "#f63",
  x: 100, y: 100,
  radius: 150,
  // start and end angles in degrees
  start: 60, end: 120
});
```

--------------------------------

### jCanvas: Draw a vector with a starting point

Source: https://projects.calebevans.me/jcanvas/docs/vectors

Draws a vector line segment on the canvas starting from a specified `x` and `y` coordinate. It uses angle (a1) and length (l1) for the segment, with stroke styling options.

```javascript
 $('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 50, y: 50,
  a1: 120,
  l1: 100
});
```

--------------------------------

### Set Canvas Dimensions with jQuery

Source: https://projects.calebevans.me/jcanvas/docs/index

Illustrates the correct and incorrect methods for setting canvas dimensions using jQuery. It emphasizes using the .prop() method to set the width and height attributes directly, as opposed to .css(), which can cause stretching and distortion.

```javascript
// BAD (will stretch and distort the canvas)
$('#myCanvas').css({ width: 800, height: 500 });
// GOOD (correct way)
$('#myCanvas').prop({ width: 800, height: 500 });
```

--------------------------------

### Draw Quadratic Curve with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/curves

Draws a quadratic curve on a canvas element using jCanvas. Requires the jCanvas library. Takes start, control, and end points along with styling options.

```javascript
$"canvas").drawQuadratic({
  strokeStyle: "#000",
  strokeWidth: 5,
  x1: 50, y1: 50, // Start point
  cx1: 200, cy1: 50, // Control point
  x2: 200, y2: 200 // End point
});
```

--------------------------------

### jCanvas Layer Masking

Source: https://projects.calebevans.me/jcanvas/docs/masking

Illustrates how to apply masking to layers using the `layer: true` and `mask: true` properties. Layer masks affect other layers. Remember to call `restoreCanvas({ layer: true })` to properly end layer masking.

```javascript
$('canvas')
  .drawArc({
    layer: true,
    fillStyle: '#36b',
    x: 150, y: 150,
    radius: 50,
    mask: true
  })
  .drawRect({
    layer: true,
    fillStyle: '#6c1',
    x: 100, y: 120,
    width: 100, height: 100
  })
  .restoreCanvas({
    layer: true
  });
```

--------------------------------

### Draw Path with Arrows at Ends in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/paths

This jCanvas example shows how to add arrows to the start and end of a path using the drawPath() method. Arrow properties like 'startArrow', 'endArrow', 'arrowAngle', and 'arrowRadius' are specified within the subpath objects (p1, p2) to customize the arrow's appearance and placement.

```javascript
$"canvas").drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'vector',
    startArrow: true,
    arrowAngle: 60,
    arrowRadius: 30,
    x: 200, y: 50,
    a1: 225,
    l1: 200
  },
  p2: {
    type: 'quadratic',
    cx1: 150, cy1: 250,
    x2: 225, y2: 200,
    endArrow: true,
    arrowAngle: 60,
    arrowRadius: 30
  }
});
```

--------------------------------

### jCanvas Basic Shape Masking

Source: https://projects.calebevans.me/jcanvas/docs/masking

Demonstrates how to use the `mask: true` property to make a shape act as a mask for subsequent shapes. Shapes drawn after the mask are clipped by its boundaries. Use `restoreCanvas()` to end the masking effect.

```javascript
$('canvas')
  .drawArc({
    fillStyle: '#36b',
    x: 150, y: 150,
    radius: 50,
    mask: true
  })
  .drawRect({
    fillStyle: '#6c1',
    x: 100, y: 120,
    width: 100, height: 100
  })
  .restoreCanvas();
```

--------------------------------

### jCanvas Rotation as Layer

Source: https://projects.calebevans.me/jcanvas/docs/rotateCanvas

Applies canvas transformations, such as rotation, as a named layer. This allows for managing canvas states and transformations within layers. Transformations applied this way must be explicitly restored. Requires the jCanvas plugin.

```javascript
$('canvas').rotateCanvas({
  layer: true,
  name: 'rotate1'
});
```

```javascript
$('canvas').restoreCanvas({
  layer: true
});
```

--------------------------------

### Create Linear Gradient in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/gradients

This snippet demonstrates how to create a linear gradient using the `createGradient()` method in jCanvas. It defines the start and end points of the gradient and specifies colors. The resulting gradient is then applied as the `fillStyle` for a drawn arc.

```javascript
const linear = $("canvas").createGradient({
  x1: 0, y1: 20,
  x2: 0, y2: 80,
  c1: 'rgb(0, 0, 0)',
  c2: '#0f0',
  c3: 'blue'
});
$("canvas").drawArc({
  fillStyle: linear,
  x: 50, y: 50,
  radius: 30
});
```

```javascript
const linear = $("canvas").createGradient({
  x1: 0, y1: 20,
  x2: 0, y2: 80,
  c1: 'rgb(0, 0, 0)',
  c2: '#0f0',
  s2: 0.2,
  c3: 'blue',
  s3: 0.5
});
$("canvas").drawArc({
  fillStyle: linear,
  x: 50, y: 50,
  radius: 30
});
```

--------------------------------

### Draw Ellipse with Arrows using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arrows

Draws an ellipse with optional start and end arrows using jCanvas. Requires center coordinates, width, height, and start/end angles. Arrow properties are customizable.

```javascript
ச்சியை.drawEllipse({
  layer: true,
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  x: 150, y: 100,
  width: 200, height: 100,
  start: -45, end: 105,
  ccw: true,
  startArrow: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90
});
```

--------------------------------

### Draw Bezier Curve with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/curves

Draws a Bezier curve on a canvas element using jCanvas. Requires the jCanvas library. Takes start, two control points, and end points along with styling options.

```javascript
$"canvas").drawBezier({
  strokeStyle: "#000",
  strokeWidth: 5,
  x1: 25, y1: 50, // Start point
  cx1: 175, cy1: 50, // Control point
  cx2: 25, cy2: 150, // Control point
  x2: 175, y2: 150, // Start/end point
  cx3: 275, cy3: 150, // Control point
  cx4: 125, cy4: 1, // Control point
  x3: 300, y3: 50 // Start/end point
});
```

--------------------------------

### Store Data on jCanvas Layer

Source: https://projects.calebevans.me/jcanvas/docs/addLayers

Shows how to attach custom data to a jCanvas layer using the 'data' property, allowing for arbitrary information storage. This example uses the drawRect method and requires jCanvas and jQuery.

```javascript
// Create and draw a rectangle layer
$("canvas").drawRect({
  layer: true,
  data: {
    something: true
  },
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
});

```

--------------------------------

### Draw a full circle with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arcs

This snippet shows how to draw a full circle by omitting the start and end properties when using jCanvas's drawArc method. It defines the stroke style, width, position, and radius.

```javascript
// Draw a full circle
$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50
});
```

--------------------------------

### jCanvas: Animate Multiple Stars on Click

Source: https://projects.calebevans.me/jcanvas/docs/mouseEvents

This example shows how to create multiple jCanvas polygon layers (stars) and attach a 'click' event to each. Clicking any star will animate and rotate only that specific star. This highlights managing events on multiple layers individually.

```javascript
// Create five cascading stars
for (let i = 0; i < 5; i += 1) {
  $"canvas").drawPolygon({
    layer: true,
    fillStyle: '#c33',
    x: 50 + i * 60, y: 50,
    radius: 30, sides: 5,
    concavity: 0.5,
    click: function (layer) {
      // Click a star to spin it
      $(this).animateLayer(layer, {
        rotate: '+=144'
      });
    }
  });
}
```

--------------------------------

### Chaining Multiple Arc Drawings on Canvas with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/syntax

This example illustrates the chaining capability of jCanvas, allowing multiple drawing operations to be performed sequentially on the same canvas element. It draws two circles with different styles and positions by chaining calls to the `drawArc` method. This approach enhances code readability and efficiency.

```javascript
$"canvas")
  .drawArc({
    fillStyle: 'black',
    x: 100, y: 100,
    radius: 50
  })
  .drawArc({
    fillStyle: '#36b',
    x: 300, y: 150,
    radius: 50
  });
```

--------------------------------

### jCanvas Rectangle Positioning (fromCenter)

Source: https://projects.calebevans.me/jcanvas/docs/rectangles

Illustrates how the `fromCenter` property affects rectangle positioning in jCanvas. When `true` (default), `x` and `y` refer to the center; when `false`, they refer to the top-left corner. This example shows both scenarios.

```javascript
 $('canvas').drawRect({
  fillStyle: '#c33',
  x: 100, y: 60,
  width: 100, height: 80
});
$('canvas').drawRect({
  fillStyle: '#6a6',
  x: 100, y: 60,
  width: 100, height: 80,
  fromCenter: false
});
```

--------------------------------

### jCanvas SVG Path Masking

Source: https://projects.calebevans.me/jcanvas/docs/masking

Demonstrates using an SVG path as a mask in jCanvas via the `drawPath()` method with `mask: true`. This allows complex shapes to define masking areas. `restoreCanvas({ layer: true })` is used to end the masking effect.

```javascript
$('canvas')
  .drawPath({
    layer: true,
    mask: true,
    strokeStyle: '#000',
    strokeWidth: 2,
    d: 'm46 71c-12.2 0-22-9.8-22-22 0-12.2 9.8-22 22-22 12.2 0 22 9.8 22 22 0 12.2-9.8 22-22 22z m103.5 159c-20.2 0-36.5-16.3-36.5-36.5 0-20.2 16.3-36.5 36.5-36.5 20.2 0 36.5 16.3 36.5 36.5 0 20.2-16.3 36.5-36.5 36.5z'
  })
  .drawRect({
    layer: true,
    fillStyle: '#c33',
    x: 50, y: 50,
    width: 100, height: 150,
    fromCenter: false
  })
  .restoreCanvas({
    layer: true
  });
```

--------------------------------

### Rotate Shape with Offset Center using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/rotateCanvas

Rotates an individual shape, allowing the center of rotation to be offset from its default origin by using translateX and translateY properties. This provides precise control over the rotation point. Requires the jCanvas plugin.

```javascript
// Rectangle rotates from its center
$('canvas').drawRect({
  fillStyle: '#c33',
  x: 150, y: 100,
  width: 150, height: 80,
  rotate: 30
});
// Rectangle rotates from its top-left corner
$('canvas').drawRect({
  fillStyle: '#6c3',
  x: 150, y: 100,
  width: 150, height: 80,
  translateX: 75, // width / 2
  translateY: 40, // height / 2
  rotate: 30
});
```

--------------------------------

### Draw Quadratic Curve with Arrow using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arrows

Draws a quadratic Bézier curve with an optional end arrow using jCanvas. Requires coordinates for start, control, and end points. Arrow properties are configurable.

```javascript
ச்சியை.drawQuadratic({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 60,
  x1: 50, y1: 50,
  cx1: 200, cy1: 50,
  x2: 250, y2: 200
});
```

--------------------------------

### Rotate Canvas Context using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/rotateCanvas

Rotates the entire canvas context by a specified degree around a given x and y coordinate. This transformation affects all subsequent drawing operations until restoreCanvas() is called. Requires the jCanvas plugin.

```javascript
$('canvas')
  .rotateCanvas({
    rotate: 45,
    x: 100, y: 100
  })
  .drawRect({
    fillStyle: '#000',
    x: 100, y: 100,
    width: 100, height: 50
  })
  .restoreCanvas();
```

--------------------------------

### Draw Bézier Curve with Arrows using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arrows

Draws a cubic Bézier curve with optional start and end arrows using jCanvas. Requires multiple control points and end points. Arrow properties are customizable.

```javascript
ச்சியை.drawBezier({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  cx1: 150, cy1: 100,
  cx2: 100, cy2: 200,
  x2: 150, y2: 200,
  cx3: 250, cy3: 200,
  cx4: 100, cy4: 50,
  x3: 250, y3: 100
});
```

--------------------------------

### Draw Regular Polygons with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/polygons

This snippet demonstrates how to draw regular polygons using the `drawPolygon()` method in jCanvas. It shows examples of drawing a triangle and a pentagon with customizable stroke and fill styles, position, and radius. The `sides` property determines the number of sides of the polygon.

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

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

--------------------------------

### Draw Line with Arrow using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arrows

Draws a line with optional start and/or end arrows using jCanvas. Requires specifying coordinates (x1, y1, x2, y2) and arrow properties like arrowRadius. 'arrowAngle' is optional.

```javascript
ச்சியை.drawLine({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  x2: 150, y2: 125,
  x3: 200, y3: 75
});
```

--------------------------------

### Crop Image Section (Center Origin) with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/images

Draws a specific section of an image where the crop region is defined relative to its center, controlled by 'cropFromCenter: false'. This example shows cropping from the top-left corner. Requires jCanvas.

```javascript
  $('canvas').drawImage({
    source: 'images/fish.jpg',
    x: 150, y: 150,
    sx: 100, sy: 70,
    sWidth: 100, sHeight: 50,
    cropFromCenter: false
  });


```

--------------------------------

### Translate Canvas using the translate property in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/translateCanvas

This method provides a shorthand for translating the canvas by setting a single `translate` property, which applies the value to both translateX and translateY. It's useful for uniform translation. The example translates the canvas by 100 units in both directions, draws a rectangle, and restores the canvas. Requires jCanvas.

```javascript
 $("canvas")
  .translateCanvas({
    translate: 100
  })
  .drawRect({
    fillStyle: "#000",
    x: 100, y: 100,
    width: 100, height: 50
  })
  .restoreCanvas();
```

--------------------------------

### jCanvas Masking Draggable Layers

Source: https://projects.calebevans.me/jcanvas/docs/masking

Shows how layer masks interact with draggable shapes. Shapes within a masked layer's bounds inherit masking behavior, affecting their perceived position and interaction. `restoreCanvas({ layer: true })` is used to manage mask scopes.

```javascript
$('canvas')
  .drawRect({
    layer: true,
    draggable: true,
    mask: true,
    name: 'blue',
    fillStyle: '#36c',
    x: 150, y: 150,
    width: 150, height: 150
  })
  .drawRect({
    layer: true,
    draggable: true,
    name: 'orange',
    fillStyle: '#f63',
    x: 80, y: 120,
    width: 80, height: 30
  })
  .restoreCanvas({
    layer: true
  })
  .drawArc({
    layer: true,
    mask: true,
    draggable: true,
    name: 'green',
    fillStyle: '#6c1',
    x: 200, y: 200,
    radius: 50
  })
  .drawRect({
    layer: true,
    draggable: true,
    name: 'red',
    fillStyle: '#c33',
    x: 180, y: 180,
    width: 50, height: 30
  })
  .restoreCanvas({
    layer: true
  });
```

--------------------------------

### jCanvas: Draw a closed and rounded vector path

Source: https://projects.calebevans.me/jcanvas/docs/vectors

Draws a closed path using multiple vector segments, with options for `rounded` ends and `closed` path. This example demonstrates creating a triangle. Accepts standard line properties like `strokeStyle`, `strokeWidth`, `rounded`, and `closed`.

```javascript
// Draw a closed path (making a triangle)
$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  closed: true,
  x: 50, y: 150,
  a1: 45,
  l1: 100,
  a2: 135,
  l2: 220
});
```

--------------------------------

### Translate Canvas using translateX and translateY in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/translateCanvas

The translateCanvas() method in jCanvas allows you to move the canvas's origin point. This example demonstrates translating the canvas by 200 units on the X-axis and 100 units on the Y-axis, then drawing a rectangle and restoring the canvas state. It requires the jCanvas library.

```javascript
 $("canvas")
  .translateCanvas({
    translateX: 200,
    translateY: 100
  })
  .drawRect({
    fillStyle: "#000",
    x: 50, y: 50,
    width: 100, height: 50
  })
  .restoreCanvas();
```

--------------------------------

### jCanvas: Using dx and dy for Drag Speed Calculation

Source: https://projects.calebevans.me/jcanvas/docs/eventProperties

Illustrates the use of `dx` and `dy` properties in jCanvas event callbacks for draggable layers. These properties represent the change in the layer's position during a drag, allowing for calculations of drag speed. The example makes a circle's opacity inversely proportional to the drag speed, fading it out when dragged faster.

```javascript
$"canvas").drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#c33',
  x: 160, y: 160,
  radius: 50,
  mousemove: function (layer) {
    const delta = Math.sqrt(Math.pow(layer.dx, 2) + Math.pow(layer.dy, 2));
    if (delta !== 0) {
      layer.opacity = 1 / delta;
    }
  }
});
```

--------------------------------

### Apply Drawing to Specific Canvas Elements by Class with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/syntax

This example demonstrates how to target and draw on specific canvas elements using a class selector in jCanvas. By appending a class name (e.g., `.demo`) to the jQuery selector, the drawing operation is confined only to canvas elements that possess that specific class. This allows for selective application of jCanvas drawings.

```javascript
$"canvas.demo").drawArc({
  fillStyle: 'black',
  x: 100, y: 100,
  radius: 50
});
```

--------------------------------

### jCanvas: Customizing Cursors with the cursors Property

Source: https://projects.calebevans.me/jcanvas/docs/eventProperties

Shows how to utilize the `cursors` property in jCanvas to change the mouse cursor when interacting with a specific layer. This property accepts an object where keys are event types (e.g., `mouseover`, `mousedown`) and values are CSS cursor styles. The example applies a 'pointer' cursor on hover and a 'move' cursor when the layer is clicked and dragged.

```javascript
$"canvas").drawText({
  layer: true,
  draggable: true,
  fillStyle: '#9cf',
  strokeStyle: '#000',
  strokeWidth: 2,
  x: 180, y: 100,
  text: 'Click here',
  fontFamily: 'Trebuchet MS',
  fontSize: 64,
  // Show pointer cursor on hover
  cursors: {
    // Show pointer on hover
    mouseover: 'pointer',
    // Show 'move' cursor on mousedown
    mousedown: 'move',
    // Revert cursor on mouseup
    mouseup: 'pointer'
  }
});
```

--------------------------------

### Create Pattern from Image File

Source: https://projects.calebevans.me/jcanvas/docs/patterns

Demonstrates creating a repeating pattern using an image file as the source. The pattern is applied as a fill style to an ellipse. The `load` callback ensures the drawing occurs after the pattern is ready.

```javascript
function draw(patt) {
  $('canvas').drawEllipse({
    fillStyle: patt,
    x: 160, y: 100,
    width: 250, height: 100
  });
}


const patt = $('canvas').createPattern({
  source: 'images/water.jpg',
  repeat: 'repeat',
  // Draw ellipse when pattern loads
  load: draw
});
```

--------------------------------

### jCanvas: Combine multiple vectors into a path

Source: https://projects.calebevans.me/jcanvas/docs/vectors

Creates a path composed of multiple connected vector line segments. Each vector is defined by its angle (a1, a2, etc.) and length (l1, l2, etc.), relative to the previous point or the starting point if specified. Supports stroke styling.

```javascript
// Draw a bent path
$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  x: 50, y: 150,
  a1: 45,
  l1: 100,
  a2: 135,
  l2: 220
});
```

--------------------------------

### Real-time Pixel Inversion on Mouse Movement with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/pixelManipulation

An example showing how to invert pixels in real-time as the mouse moves over a jCanvas canvas. It uses the 'mousemove' event and the setPixels() method to modify a small area around the cursor. It also configures jCanvas for potentially better performance with frequent pixel reads.

```javascript
// For better canvas performance when frequently reading
// image data, Chrome recommends we instruct the browser
// to use a software-rendered canvas, rather than a
// hardware-accelerated canvas
$.jCanvas.defaults.willReadFrequently = true;


function invert(params) {
  $(this).setPixels({
    x: params.eventX, y: params.eventY,
    width: 50, height: 50,
    // loop through each pixel
    each: function (px) {
      px.r = 255 - px.r;
      px.g = 255 - px.g;
      px.b = 255 - px.b;
    }
  });
}


$('canvas').drawImage({
  layer: true,
  source: 'images/fish.jpg',
  x: 150, y: 100,
  mousemove: invert
});
```

--------------------------------

### Get Canvas Image as Base64 String

Source: https://projects.calebevans.me/jcanvas/docs/getCanvasImage

Retrieves the canvas image data as a base64-encoded string. This method can be used without arguments to get a PNG by default. It returns a data URL string.

```javascript
$('canvas').getCanvasImage();
```

--------------------------------

### Draw Basic Line Path with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/lines

Demonstrates the basic usage of the `drawLine()` method in jCanvas to draw a line path. It requires specifying coordinates like x1, y1, x2, y2, and so on. Styling properties like `strokeStyle` and `strokeWidth` are also shown.

```javascript
$"canvas").drawLine({
  strokeStyle: "#000",
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});
```

--------------------------------

### Create a Pie Chart with jCanvas Slices and Labels

Source: https://projects.calebevans.me/jcanvas/docs/slices

Illustrates the creation of a pie chart by drawing multiple slices and adding text labels. The spread property controls the spacing between slices, and drawText() is used for labels. Requires jCanvas library.

```javascript
$"canvas")
  .drawSlice({
    layer: true,
    name: 'red-slice',
    groups: ['chart', 'slices'],
    fillStyle: '#c33',
    x: 180, y: 110,
    start: -45, end: 15,
    radius: 100,
    spread: 1 / 40
  })
  .drawSlice({
    layer: true,
    name: 'green-slice',
    groups: ['chart', 'slices'],
    fillStyle: '#6c0',
    x: 180, y: 110,
    start: -135, end: -45,
    radius: 100,
    spread: 1 / 40
  })
  .drawSlice({
    layer: true,
    name: 'blue-slice',
    groups: ['chart', 'slices'],
    fillStyle: '#36c',
    x: 180, y: 110,
    start: 15, end: -135,
    radius: 100,
    spread: 1 / 40
  })
  .drawText({
    layer: true,
    name: 'red-label',
    groups: ['chart', 'labels'],
    fillStyle: '#fff',
    x: 160, y: 50,
    fontFamily: 'sans-serif',
    fontSize: 20,
    text: '17%'
  })
  .drawText({
    layer: true,
    name: 'green-label',
    groups: ['chart', 'labels'],
    fillStyle: '#fff',
    x: 120, y: 115,
    fontFamily: 'sans-serif',
    fontSize: 20,
    text: '25%'
  })
  .drawText({
    layer: true,
    name: 'blue-label',
    groups: ['chart', 'labels'],
    fillStyle: '#fff',
    x: 220, y: 150,
    fontFamily: 'sans-serif',
    fontSize: 20,
    text: '58%'
  });
```

--------------------------------

### jCanvas: Create Generic Shadows

Source: https://projects.calebevans.me/jcanvas/docs/shadows

Demonstrates how to apply a generic shadow to a canvas shape using `shadowColor` and `shadowBlur`. This method is useful for adding depth and visual emphasis to elements. No external libraries beyond jCanvas and jQuery are required.

```javascript
$("canvas").drawArc({
  fillStyle: "#58d",
  shadowColor: "#000",
  shadowBlur: 10,
  x: 50, y: 50,
  radius: 30
});
```

--------------------------------

### Detect Pixel Ratio with jCanvas Callback

Source: https://projects.calebevans.me/jcanvas/docs/detectPixelRatio

This snippet demonstrates how to use jCanvas's detectPixelRatio() method. It takes a callback function that receives the device's pixel ratio as an argument. This is useful for applying specific logic based on the display's resolution, such as for retina devices.

```javascript
$('canvas').detectPixelRatio(function (ratio) {
  // Run some code depending on the device pixel ratio
});
```

--------------------------------

### Get Canvas Image with Specific Format

Source: https://projects.calebevans.me/jcanvas/docs/getCanvasImage

Retrieves the canvas image data as a base64-encoded string, allowing you to specify either 'png' or 'jpeg' as the desired image format. The output is a data URL string.

```javascript
$('canvas').getCanvasImage('png');
$('canvas').getCanvasImage('jpeg');
```

--------------------------------

### Draw a closed arc with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arcs

This snippet demonstrates how to draw a closed red arc using jCanvas's drawArc method. It sets the stroke style, width, position, radius, start and end angles, and enables the 'closed' property to connect the start and end points.

```javascript
// Draw a closed red arc
$('canvas').drawArc({
  strokeStyle: '#c33',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  start: 45, end: 225,
  closed: true
});
```

--------------------------------

### Draw jCanvas Rectangle with Rounded Corners

Source: https://projects.calebevans.me/jcanvas/docs/rectangles

Demonstrates how to draw a jCanvas rectangle with rounded corners using the `cornerRadius` property. This example shows a filled rectangle with a corner radius of 10.

```javascript
 $('canvas').drawRect({
  fillStyle: '#36c',
  x: 150, y: 100,
  width: 200, height: 100,
  cornerRadius: 10
});
```

--------------------------------

### jCanvas Layer Animation with Step Callback

Source: https://projects.calebevans.me/jcanvas/docs/animateLayers

Animates a jCanvas layer using an options object, allowing for `step` and `complete` callbacks. The `step` callback executes at each animation frame, receiving current value, animation properties, and the layer. The `complete` callback executes once the animation finishes.

```javascript
$
.drawRect({
  layer: true,
  name: 'myBox',
  fillStyle: '#36c',
  x: 50, y: 50,
  width: 1, height: 1
});

$('canvas').animateLayer(
  'myBox',
  {
    x: 200
  },
  {
    duration: 1000,
    easing: 'swing',
    step: function (now, fx, layer) {
      // do something for each step of the animation
    },
    complete: function (layer) {
      // still do something at end of animation
    }
  }
);

```

--------------------------------

### Draw a 90-degree arc with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arcs

This snippet demonstrates how to draw a 90-degree arc using jCanvas. It sets the stroke style, width, position, and radius, along with the start and end angles in degrees.

```javascript
// Draw a 90-degree arc
$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 5,
  x: 100, y: 100,
  radius: 50,
  // start and end angles in degrees
  start: 0, end: 90
});
```

--------------------------------

### Implement Snap-to-Grid Dragging in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/draggableLayers

Provides a solution for snap-to-grid dragging in jCanvas using the `updateDragX` and `updateDragY` callbacks. This method involves defining a grid snap interval and using mathematical rounding to ensure dragged layers align to a predefined grid, improving visual consistency.

```javascript
// The pixel multiple to snap to
const snapToAmount = 40;
// Round the given value to the nearest multiple of n
function nearest(value, n) {
  return Math.round(value / n) * n;
}
$"canvas").drawArc({
  layer: true,
  draggable: true,
  fillStyle: '#36c',
  x: 160, y: 120,
  radius: 50,
  updateDragX: function (layer, x) {
    return nearest(x, snapToAmount);
  },
  updateDragY: function (layer, y) {
    return nearest(y, snapToAmount);
  }
});
```

--------------------------------

### Draw Ellipse Arc with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/ellipses

Draws a segment of an ellipse (an arc) on a jCanvas canvas. Requires jCanvas library and a canvas element. Allows specifying start and end angles, and counter-clockwise drawing.

```javascript
$"canvas").drawEllipse({
  strokeStyle: "#5b2",
  strokeWidth: 4,
  x: 150, y: 100,
  width: 200, height: 100,
  start: 0, end: 180,
  ccw: true
});
```

--------------------------------

### Define a Basic jCanvas Plugin Method

Source: https://projects.calebevans.me/jcanvas/docs/extending

This snippet demonstrates the fundamental structure for creating a jCanvas plugin. It uses `$.jCanvas.extend()` to define a new method named `pluginName` with custom properties and a function for its logic. The `fn` function receives the canvas context and parameters.

```javascript
$.jCanvas.extend({
  name: 'pluginName',
  props: {
    prop: true
  },
  fn: function (ctx, params) {
    // Your code here
  }
});
```

--------------------------------

### Draw Closed Line Path with jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/lines

Illustrates how to draw a closed line path in jCanvas by setting the `closed` property to `true`. This connects the start and end points of the path with an additional line segment.

```javascript
$"canvas").drawLine({
  strokeStyle: "#000",
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200,
  closed: true
});
```

--------------------------------

### Extend jCanvas Defaults (JavaScript)

Source: https://projects.calebevans.me/jcanvas/docs/object

Shows how to extend jCanvas's default properties using jQuery's $.extend method. This allows for setting multiple default properties simultaneously.

```javascript
$.extend($.jCanvas.defaults, {
  fromCenter: false,
  inDegrees: false
});
```

--------------------------------

### Draw Arc with Arrow using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/arrows

Draws an arc with an optional end arrow using jCanvas. Requires center coordinates (x, y), start and end angles, and radius. Arrow properties can be configured.

```javascript
ச்சியை.drawArc({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x: 160, y: 120,
  start: 90, end: 360,
  radius: 50
});
```

--------------------------------

### Create Pattern from Image DOM Element

Source: https://projects.calebevans.me/jcanvas/docs/patterns

Shows how to create a repeating pattern using an existing image DOM element. Similar to the file source, this pattern is applied to an ellipse, and the `load` callback is used.

```javascript
function draw(patt) {
  $('canvas').drawEllipse({
    fillStyle: patt,
    x: 200, y: 100,
    width: 250, height: 100
  });
}


const patt = $('canvas').createPattern({
  source: $('#water')[0],
  repeat: 'repeat',
  // Draw ellipse when pattern loads
  load: draw
});
```

--------------------------------

### Handle Drag Events for Layers in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/draggableLayers

Illustrates how to handle drag events for layers in jCanvas by defining callback functions for `dragstart`, `drag`, and `dragstop`. These callbacks allow custom logic to be executed at different stages of the dragging process, providing fine-grained control over layer interaction.

```javascript
$"canvas").drawArc({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50,
  dragstart: function () {
    // code to run when dragging starts
  },
  drag: function (layer) {
    // code to run as layer is being dragged
  },
  dragstop: function (layer) {
    // code to run when dragging stops
  }
});
```

--------------------------------

### jCanvas: Offset Shadows

Source: https://projects.calebevans.me/jcanvas/docs/shadows

Illustrates how to offset shadows relative to the shape using `shadowX` and `shadowY` properties, in addition to `shadowColor` and `shadowBlur`. This allows for more dynamic shadow effects. It requires jCanvas and jQuery.

```javascript
$("canvas").drawArc({
  fillStyle: "#58d",
  strokeStyle: "#8e3",
  strokeWidth: 4,
  shadowColor: "#000",
  shadowBlur: 5,
  shadowX: -5,
  shadowY: 5,
  x: 50, y: 50,
  radius: 30
});
```

--------------------------------

### Add and Draw a Function Layer using draw() in jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/addLayers

Shows how to simultaneously create and draw a function layer using the draw() method with layer: true and the 'fn' property in jCanvas. The provided function receives the canvas context and is executed immediately upon drawing.

```javascript
// Create and draw a named function layer
$"canvas".draw({
  layer: true,
  name: 'myBox',
  fn: function (ctx) {
    ctx.fillStyle = '#36c';
    ctx.fillRect(50, 50, 100, 50);
  }
});
```

--------------------------------

### Manual Drawing with Native Canvas API using jCanvas

Source: https://projects.calebevans.me/jcanvas/docs/drawManually

Demonstrates how to draw manually on a canvas using the jCanvas draw() method by providing a callback function that utilizes native canvas context methods like fillStyle and fillRect. This allows for complex custom drawing operations.

```javascript
$('canvas').draw({
  fn: function (ctx) {
    ctx.fillStyle = '#333';
    ctx.fillRect(50, 50, 100, 100);
  }
});
```

--------------------------------

### Create Pattern from Drawing Function

Source: https://projects.calebevans.me/jcanvas/docs/patterns

Illustrates creating a pattern using a function as the source, allowing for dynamic pattern generation. The function defines the pattern's dimensions and draws elements using jCanvas methods. This pattern is then applied to an ellipse.

```javascript
// Create pattern
const patt = $('canvas').createPattern({
  // Define width/height of pattern (before repeating)
  width: 40, height: 40,
  source: function (context) {
    // Draw rectangle (which will repeat)
    $(this).drawRect({
      fillStyle: '#bcdeb2',
      strokeStyle: '#009c56',
      strokeWidth: 1,
      x: 0, y: 0,
      width: 40, height: 40,
      fromCenter: false,
      cornerRadius: 6
    });
  }
});


// Draw ellipse with pattern as fill style
$('canvas').drawEllipse({
  fillStyle: patt,
  strokeStyle: '#009c56',
  x: 200, y: 100,
  width: 300, height: 100
});
```
Tokens:
Raw