API Documentation

Drawing Canvas Configuration

Learn how to configure and control the drawing canvas through URL parameters for research, clinical use, or creative tasks.

Basic Parameters Appearance Toolbar Advanced

The Drawing API allows complete customization of the brush, toolbar, colors, background, grid, and interface behavior using URL parameters. These options support a wide range of experimental or educational use cases.

Basic Parameters

Core parameters that define the drawing behavior.

brushSize

Number (1-50)

Controls the default brush/eraser size in pixels.

?brushSize=10
Default: 5

Examples:

/?brushSize=15

colors

Comma-separated hex colors or '*'

Defines which colors are available in the color picker. Use comma-separated hex values or '*' for all default colors.

?colors=#ff0000,#00ff00,#0000ff
Default: 8 default colors

Examples:

/?colors=*

/?colors=#ff0000,#00ff00

Appearance

Parameters that affect how the canvas looks, including background and grid.

Background Controls

Controls background images, colors, and positioning for the canvas.

bgImage

URL-encoded image URL

Sets a background image URL for the canvas. The image will be scaled to cover the entire canvas.

?bgImage=https://example.com/image.jpg
Default: None

isColoringBookImage

Boolean (true/false)

When set to true, processes the background image to create a coloring book effect. Converts white background to transparent and keeps black lines for coloring.

?isColoringBookImage=true
Default: false

Examples:

/?bgImage=...&isColoringBookImage=true

bgOpacity

Number (0-100)

Controls the opacity of both the background color AND background image. Works with both bgColor and bgImage parameters.

?bgOpacity=75
Default: 100

Examples:

/?bgImage=...&bgOpacity=30

bgImageSize

Number (10-200)

Controls the size of the background image as a percentage of the canvas.

?bgImageSize=75
Default: 100 (full size)

Examples:

/?bgImageSize=150

bgImagePosX

Number (0-100)

Horizontal position of the background image (0-100%). 0% = left, 50% = center, 100% = right.

?bgImagePosX=75
Default: 50

Examples:

/?bgImage=...&bgImagePosX=25

bgImagePosY

Number (0-100)

Vertical position of the background image (0-100%). 0% = top, 50% = center, 100% = bottom.

?bgImagePosY=25
Default: 50

Examples:

/?bgImage=...&bgImagePosY=75

bgColor

URL-encoded hex color

Sets the background color of the canvas. Use URL-encoded hex value.

?bgColor=%23000000
Default: #ffffff

Grid Controls

Adds a customizable grid overlay to the canvas.

gridEnabled

Boolean (true/false)

Enables or disables the grid overlay.

?gridEnabled=true
Default: false

Examples:

/?gridEnabled=true

gridColor

URL-encoded hex color

Sets the grid color (URL-encoded hex value).

?gridColor=%23ff0000
Default: #cccccc

gridOpacity

Number (0-100)

Sets the grid opacity (0-100).

?gridOpacity=50
Default: 30

gridStyle

String (solid, dotted, dashed, sparse)

Sets the grid line style.

?gridStyle=dotted
Default: solid

gridSize

Number (10-100)

Sets the grid cell size in pixels (10-100).

?gridSize=30
Default: 20

Toolbar Settings

Parameters for configuring toolbar layout and visibility.

hideToolbar

Boolean (true/false)

When true, hides the entire toolbar for a minimal interface.

?hideToolbar=true
Default: false

Examples:

/?hideToolbar=true

toolbarSize

String

Controls the size of toolbar components. Options: default, small, medium, large.

?toolbarSize=large
Default: default

Examples:

/?toolbarSize=large

toolbarPosition

String

Sets the position of the toolbar. Options: up, down, left, right.

?toolbarPosition=right
Default: up

Examples:

/?toolbarPosition=left

Input Controls

Controls which input elements are visible in the toolbar using a JSON object.

showInputs

JSON Object

Controls visibility of input controls in the toolbar. Use a JSON object with boolean values for each control type.

?showInputs={"eraserInput":false,"gridInputs":false}
Default: {"eraserInput":true,"cursorSizeInput":true,"enableUndoRedoInput":true,"backgroundInputs":true,"gridInputs":true,"bucketInput":true}

Properties:

  • eraserInput – Shows/hides the eraser tool button
  • bucketInput – Shows/hides the bucket (paint fill) tool button
  • cursorSizeInput – Shows/hides the brush size slider
  • enableUndoRedoInput – Shows/hides undo/redo buttons
  • backgroundInputs – Shows/hides background color and image controls
  • gridInputs – Shows/hides grid configuration controls

Advanced Configuration

More advanced parameters for fully custom setups.

Complete Example

A full drawing configuration example:

/?brushSize=12&colors=#ff0000,#00ff00,#0000ff&toolbarPosition=left&bgImage=https://example.com/bg.jpg&bgOpacity=40&gridEnabled=true&gridColor=%23cccccc&gridOpacity=25&gridStyle=dotted&gridSize=25&showInputs={"eraserInput":false,"cursorSizeInput":true,"enableUndoRedoInput":true,"backgroundInputs":false,"gridInputs":true}