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:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s