Drawing Tool

About

A html canvas & js drawing tool

Examples

<!-- DEFAULT CONFIG -->
<!-- If making fixed width, width must be specified -->
<div data-drawing-tool="" data-return-func="imageReturn" data-config="{
    fixWidth: false,
    width: undefined,
    height: 100,
    lineWidth: 4,
    strokeStyle: '#3d3d3d',
    lineCap: 'round',
    fillColor: '#fff'
}"></div>

JS - Parameters

• data-return-func - optional - Callback function that can be passed through to the directive. Runs on save, mainly to be used to return the base64 url to the controller.
• data-config: - optional - config object for canvas and it’s config.
  • fixWidth: bool - defaults: false - if set width must be specified. If left false the canvas will fill the wrapping containers width.
  • width: number - defaults: undefined - width of the canvas, optional (unless fixWidth: true), will stretch its container if not specified.
  • height: number - defaults: 100 - height of the canvas.
  • lineWidth: number - defaults: 4 - width of the stroke.
  • strokeStyle: string - defaults: ‘#3d3d3d’ - a hex or rgb color code.
  • lineCap: string - defaults: ‘round’ - the lineCap of the stroke.
  • fillColor: string - defaults - ‘#fff’ - a hex or rgb color code. Background color of the canvas.

Accessibility

Will not function with out JS