Drupal 7 – Add HTML5 Canvas to content type

The HTML5 Canvas let you draw graphics on the fly. So if you want to collect drawing in Drupal, the Canvas Field could help.

1. Download and enable the module.

2. Add an image field to any content type and select Canvas Widget as shown below.
drupal7-canvas-field-1
 

3. This Canvas field will fall back to a image uploader for browser like Internet Explorer. You can configure the default display in the field edit page.
drupal7-canvas-field-2
 

4. By default, the canvas image will be saved on the server @ /sites/default/files/.png. But if you want to put them in a single folder, you need to manually create the folder on the server first. Let say i want to save all the canvas images in /sites/default/files/canvas/. First i need to create the canvas directory on /sites/default/files/. And then set the file directory to canvas.
drupal7-canvas-field-3
 

5. Now you could create your own drawing by creating a new node.
drupal7-canvas-field-4
 

This module is quite interesting and there are many more canvas features could be added to the canvas.

Done =)

Reference:

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.