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() {
        var drawTool = pixie.getTool('draw');
        drawTool.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',
            ]
        }
    }
});

Draw tool methods

Methods

disable

  • disable(): void

  • Disable drawing mode on canvas.

    Returns void

enable

  • enable(): void

  • Enable drawing mode on canvas.

    Returns void

getBrushColor

  • getBrushColor(): string

  • Get color of drawing brush.

    Returns string

getBrushSize

  • getBrushSize(): number

  • Get size of drawing brush.

    Returns number

getBrushType

  • getBrushType(): string

  • Get type of current drawing brush.

    Returns string

setBrushColor

  • setBrushColor(color: string): void

  • Change color of drawing brush.

    Parameters

    • color: string

    Returns void

setBrushSize

  • setBrushSize(size: number): void

  • Change size of drawing brush.

    Parameters

    • size: number

    Returns void

setBrushType

  • setBrushType(type: string): void

  • Change type of drawing brush.

    Parameters

    • type: string

    Returns void