Basic usage

var MyBubbles = new ComicBubbles(image_id)

or

var MyBubbles = new ComicBubbles(image_id, canvas_settings, bubble_settings)

image_id: String, required
canvas_settings: Object, optional
bubble_settings: Object, optional

Note: If you want to destroy MyBubbles, call DestroyComicBubbles(MyBubbles)

Properties

var canvas_settings = {canvas: canvas_properties}

canvas_properties

property default description
text "" plain text
line break: "\n"
width "140px" text field width
height "65px" text field height
fontFamily 'Arial' valid fonts:
- 'Arial'
- 'Arial Black'
- 'Comic Sans MS'
- 'Courier New'
- 'Georgia'
- 'Impact'
- 'Lucida Console'
- 'Lucida Sans Unicode'
- 'Palatino Linotype'
- 'Tahoma'
- 'Times New Roman'
- 'Trebuchet MS'
- 'Verdana'
Note: You can also use Google fonts (include them inside the <head> section with a stylesheet link)
fontSize "15px" valid values: integers from 8 to 99
fontStyle "normal" "normal" or "italic"
fontWeight "normal" "normal" or "bold"
textAlign "center" "left" or "center" or "right" or "justify"
lineHeight 1.2 0.1 - 3
background "#ffffff" hex value
color "#000000" hex value
opacity 0.8 0 - 1
readonly true set to false to enable mouse actions (comicbubbles_editor.js required)
settable true set to false to hide 's' button
bubbleStyle "none" "none" or "speak" or "think" or "scream" or "arrow"
responsive false set to true to adjust bubble positions while resizing the image (responsiveness) v1.3

var bubble_settings = {bubble: bubble_properties}

bubble_properties

property default description
id "b" + new Date().getTime() + number of bubbles can be replaced by any string
name "" can be any string
className "" can be used in media queries (e.g. to override fontSize) v1.3
text canvas_settings.canvas.text plain text
line break: "\n"
x "0px" text field x coordinate
y "0px" text field y coordinate
width canvas_settings.canvas.width text field width
height canvas_settings.canvas.height text field height
fontFamily canvas_settings.canvas.fontFamily valid fonts:
- 'Arial'
- 'Arial Black'
- 'Comic Sans MS'
- 'Courier New'
- 'Georgia'
- 'Impact'
- 'Lucida Console'
- 'Lucida Sans Unicode'
- 'Palatino Linotype'
- 'Tahoma'
- 'Times New Roman'
- 'Trebuchet MS'
- 'Verdana'
Note: You can also use Google fonts (include them inside the <head> section with a stylesheet link)
fontSize canvas_settings.canvas.fontSize valid values: integers from 8 to 99
fontStyle canvas_settings.canvas.fontStyle "normal" or "italic"
fontWeight canvas_settings.canvas.fontWeight "normal" or "bold"
textAlign canvas_settings.canvas.textAlign "left" or "center" or "right" or "justify"
lineHeight canvas_settings.canvas.lineHeight 0.1 - 3
background canvas_settings.canvas.background hex value
color canvas_settings.canvas.color hex value
opacity canvas_settings.canvas.opacity 0 - 1
readonly canvas_settings.canvas.readonly set to false to enable mouse actions (comicbubbles_editor.js required)
settable canvas_settings.canvas.settable set to false to hide 's' button
visible true set to false to hide bubble
bubbleStyle canvas_settings.canvas.bubbleStyle "none" or "speak" or "think" or "scream" or "arrow"
tailLocation "se" valid values:
"nw", "n", "ne", "e", "se", "s", "sw", "w"
tailX tail pointer x coordinate
tailY tail pointer y coordinate

ComicBubbles object methods

onCanvasLoad(callback) v1.3

callback: function, required

getBubbleById(bubble_id)returnsBubble

bubble_id: String, required

getBubblesByName(bubble_name)returnsBubble[]

bubble_name: String, required

getAllBubbles()returnsBubble[]

addBubble(bubble, callback)returnsBubble

bubble: Bubble, required
callback: function, optional

setText(text)returnsComicBubbles

text: String, required

getText()returnsString

setWidth(width)returnsComicBubbles

width: Number, required

getWidth()returnsNumber

setHeight(height)returnsComicBubbles

height: Number, required

getHeight()returnsNumber

setFontFamily(font_family)returnsComicBubbles

font_family: String, required

getFontFamily()returnsString

setFontSize(font_size)returnsComicBubbles

font_size: Number, required

getFontSize()returnsNumber

setFontStyle(font_style)returnsComicBubbles

font_style: String, required

getFontStyle()returnsString

setFontWeight(font_weight)returnsComicBubbles

font_weight: String, required

getFontWeight()returnsString

setTextAlign(text_align)returnsComicBubbles

text_align: String, required

getTextAlign()returnsString

setLineHeight(line_height)returnsComicBubbles

line_height: Number, required

getLineHeight()returnsNumber

setBackground(background_color)returnsComicBubbles

background_color: String, required

getBackground()returnsString

setColor(text_color)returnsComicBubbles

text_color: String, required

getColor()returnsString

setOpacity(opacity)returnsComicBubbles

opacity: Number, required

getOpacity()returnsNumber

setReadonly(readonly)returnsComicBubbles

readonly: Boolean, required

isReadonly()returnsBoolean

setSettable(settable)returnsComicBubbles

settable: Boolean, required

isSettable()returnsBoolean

setResponsive(responsive)returnsComicBubbles v1.3

responsive: Boolean, required

isResponsive()returnsBoolean v1.3

setBubbleStyle(bubble_style)returnsComicBubbles

bubble_style: String, required

getBubbleStyle()returnsString

getDefaultSettings()returnsObject

onBubbleStateChange(callback)

callback: function, required

getBubblesData()returnsObject

Bubble object methods

setId(id, callback)returnsBubble

id: String, required
callback: function, optional

getId()returnsString

setName(name, callback)returnsBubble

name: String, required
callback: function, optional

getName()returnsString

setText(text, callback)returnsBubble

text: String, required
callback: function, optional

getText()returnsString

setClassName(class_name, callback)returnsBubble v1.3

class_name: String, required
callback: function, optional

getClassName()returnsString v1.3

setX(x, callback)returnsBubble

x: Number, required
callback: function, optional

getX()returnsNumber

setY(y, callback)returnsBubble

y: Number, required
callback: function, optional

getY()returnsNumber

setWidth(width, callback)returnsBubble

width: Number, required
callback: function, optional

getWidth()returnsNumber

setHeight(height, callback)returnsBubble

height: Number, required
callback: function, optional

getHeight()returnsNumber

setFontFamily(font_family, callback)returnsBubble

font_family: String, required
callback: function, optional

getFontFamily()returnsString

setFontSize(font_size, callback)returnsBubble

font_size: Number, required
callback: function, optional

getFontSize()returnsNumber

setFontStyle(font_style, callback)returnsBubble

font_style: String, required
callback: function, optional

getFontStyle()returnsString

setFontWeight(font_weight, callback)returnsBubble

font_weight: String, required
callback: function, optional

getFontWeight()returnsString

setTextAlign(text_align, callback)returnsBubble

text_align: String, required
callback: function, optional

getTextAlign()returnsString

setLineHeight(line_height, callback)returnsBubble

line_height: Number, required
callback: function, optional

getLineHeight()returnsNumber

setBackground(background_color, callback)returnsBubble

background_color: String, required
callback: function, optional

getBackground()returnsString

setColor(text_color, callback)returnsBubble

text_color: String, required
callback: function, optional

getColor()returnsString

setOpacity(opacity, callback)returnsBubble

opacity: Number, required
callback: function, optional

getOpacity()returnsNumber

setReadonly(readonly, callback)returnsBubble

readonly: Boolean, required
callback: function, optional

isReadonly()returnsBoolean

setSettable(settable, callback)returnsBubble

settable: Boolean, required
callback: function, optional

isSettable()returnsBoolean

setTailLocation(tail_location, callback)returnsBubble

tail_location: String, required
callback: function, optional

getTailLocation()returnsString

setTailX(tail_x, callback)returnsBubble

tail_x: Number, required
callback: function, optional

getTailX()returnsNumber

setTailY(tail_y, callback)returnsBubble

tail_y: Number, required
callback: function, optional

getTailY()returnsNumber

setBubbleStyle(bubble_style, callback)returnsBubble

bubble_style: String, required
callback: function, optional

getBubbleStyle()returnsString

show(callback)returnsBubble

callback: function, optional

hide(callback)returnsBubble

callback: function, optional

isVisible()returnsBoolean

fadeIn(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

fadeOut(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

moveTo(x, y, speed, callback)returnsBubble

x: Number, required
y: Number, required
speed: 'slowest'|'slower'|'slow'|'fast'|'faster'|'fastest', optional
callback: function, optional

pumpUp(speed, callback)returnsBubble

speed: 'slowest'|'slower'|'slow'|'fast'|'faster'|'fastest', optional
callback: function, optional

delay(miliseconds, callback)returnsBubble

miliseconds: Number, optional
callback: function, optional

remove(callback)

callback: function, optional

onMouseEvent(callback, event)returnsBubble

callback: function, required
event: 'click'|'mousedown'|'mouseup'|'mouseover'|'mouseout', optional

offMouseEvent(callback, event)returnsBubble

callback: function, required
event: 'click'|'mousedown'|'mouseup'|'mouseover'|'mouseout', optional

getBubbleSettings()returnsObject