Drawing Field

Component ID

2340611

Component name

Drawing Field

Component type

module

Maintenance status

Development status

Component security advisory coverage

covered

Downloads

1861

Component created

Component changed

Component body

Drawing Field provides a field type to create HTML5 based drawing.

What this module Provides:

  • Rich drawing tools
  • Exporting drawings to PNG
  • Saving and loading JSON
  • Constant-size or infinite canvases

It achieves this using the literallycanvas API plugin from:
Literally Canvas which has dependency on react.js.

Browser support: Firefox 3+, Safari1.4+, Chrome, IE10+, Opera 9.5+ support the HTML5 canvas tag.

Requirements:
Libraries API

Installation:
• Download Literally canvas v0.4.0 extract contents to libraries/literallycanvas
• Download React JS 0.10.0 library and rename as react.js, add to libraries/reactjs.
• Install and enable Libraries API module
• Install and enable Drawing Field module

Usage:
• Create a content type, entity form with a drawingfield widget.
• Customize the canvas background color, width and height of the Drawing Field instance to your needs
• Start creating drawings

Go to readme.txt to get more details regarding installation.

Similar Module

* canvas_field

How is it different from other canvas base field type:
* Provides a field type to create canvas based drawing for web and touch devices and drawing can be edited once created.
* Drawing can be rotated left to right and top to bottom.
* Text or contents can be provided on the drawing.
* It has option like undo/redo/clear to perform on the drawing to get effective image.
* Pencil size can be changed at various level from thinner to thick.
* Line/rectangle/Circle can be provided on the canvas with various background color.