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.

Supporting organizations: 

Project information

Releases