https://github.com/tennisonchan/fabric-brush

Crayon is a canvas brush based on an awesome framework Fabric.js
https://github.com/tennisonchan/fabric-brush

bower brushes fabric-brush fabricjs

Last synced: 5 days ago
JSON representation

Crayon is a canvas brush based on an awesome framework Fabric.js

• Host: GitHub
• URL: https://github.com/tennisonchan/fabric-brush
• Owner: tennisonchan
• License: other
• Created: 2016-02-14T00:46:34.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-05-03T22:46:53.000Z (over 8 years ago)
• Last Synced: 2024-03-15T00:47:33.585Z (11 months ago)
• Topics: bower, brushes, fabric-brush, fabricjs
• Language: JavaScript
• Homepage: https://tennisonchan.github.io/fabric-brush
• Size: 962 KB
• Stars: 290
• Watchers: 10
• Forks: 54
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - fabric-brush - brush/)] - Crayon is a canvas brush based on an awesome framework Fabric.js.   (Libraries / Canvas draw)

README

        
# Fabric Brush - Canvas Brushes on Fabric.js

Fabric Brush is a collection of brushes built on an awesome canvas framework Fabric.js

## Quickstart

- [Install fabric with bower](https://github.com/kangax/fabric.js): `bower install fabric`

- Install fabric-brush with bower: `bower install fabric-brush`

## [Demo](https://tennisonchan.github.io/fabric-brush)

[](https://tennisonchan.github.io/fabric-brush)

[](https://tennisonchan.github.io/fabric-brush)

[](https://tennisonchan.github.io/fabric-brush)

[](https://tennisonchan.github.io/fabric-brush)

### Examples of use

Set the crayon brush as the free drawing brush

```html

```

```javascript

var canvas = new fabric.Canvas('c');

// Crayon Brush

canvas.freeDrawingBrush = new fabric.CrayonBrush(canvas, {

  width: 70,

  opacity: 0.6,

  color: "#ff0000"

});

// Ink Brush

// canvas.freeDrawingBrush = new fabric.InkBrush(canvas);

// Marker Brush

// canvas.freeDrawingBrush = new fabric.MarkerBrush(canvas);

// Spray Brush

// canvas.freeDrawingBrush = new fabric.SprayBrush(canvas);

```

Change color of the brush into red

```

canvas.freeDrawingBrush.changeColor("#ff0000");

```

Change opacity of the brush into 0.6

```

canvas.freeDrawingBrush.changeOpacity(0.6);

```