Draw

Drawing engine of pixie is optimized for touch screen and desktop interaction and supports different brush types, colors and thickness.

var pixie = new Pixie({
    onLoad: function() {
        pixie.tools.draw.enable();
    }
});

Specifying brush presets

In order to specify brush presets, use the brushSizes and brushTypes options:

var pixie = new Pixie({
    colorPresets: [
        'red', 'blue', 'green', '#000', 'rgba(0,0,0,0.5)'
    ],
    tools: {
        draw: {
            brushSizes: [8, 13, 18, 25, 35],
            brushTypes: [
                'PencilBrush',
                'VLineBrush',
                'DiamondBrush',
                'HLineBrush',
                'CircleBrush',
                'SquareBrush',
                'SprayBrush',
            ]
        }
    }
});

Methods

disable

Disable drawing mode on canvas.

disable(): void

enable

Enable drawing mode on canvas.

enable(): void

getBrushColor

Get color of drawing brush.

getBrushColor(): string

getBrushSize

Get size of drawing brush.

getBrushSize(): number

getBrushType

Get type of current drawing brush.

getBrushType(): string

setBrushColor

Change color of drawing brush.

setBrushColor(color: string): void

setBrushSize

Change size of drawing brush.

setBrushSize(size: number): void

setBrushType

Change type of drawing brush.

setBrushType(type: string): void