Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Drawing on websites

White board class provides a way to draw on website. It is possible to set width and color of drawing line.

Main reason for this package is to save some notes on different pages of website, or share drawings with others using import/export function, for example, with webdesigners, to direct them to flaws, bugs or changes in design.

Package contains whiteboard.js, whiteboard.packed.js (packed javascript) and one example file: example.html to demonstrate class functionality.

Contents

Download

Example codes

function addElem(text, callback, prnt)
{
	var inp = document.createElement("input");
	inp.setAttribute("type", "button");
	inp.setAttribute("value", text);
	inp.onclick = callback;
	var p = document.createElement("p");
	p.appendChild(inp);
	prnt.appendChild(p);
}
var wh = new whiteboard();
var control = document.createElement("div");
control.style.position = "fixed";
control.style.top = "0";
control.style.right = "0";
control.style.zIndex = "1001";
control.style.backgroundColor = "#fff";
control.style.border = "2px solid black";
control.style.padding = "10px";

addElem("DrawOn", function(){wh.drawOn()}, control);
addElem("DrawOff", function(){wh.drawOff()}, control);
addElem("ChangeStyle", function(){wh.setWidth(10); wh.setColor("#0000ff");}, control);
addElem("Clear", function(){wh.clear()}, control);
addElem("Export", function(){alert(wh.exportDraw());}, control);
addElem("Import", function(){wh.importDraw(prompt())}, control);
addElem("Save", function(){wh.saveDraw()}, control);
addElem("Load", function(){wh.loadDraw()}, control);

document.body.appendChild(control);

Live Examples

Click DrawOn on the toolbar in the right upper corner

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew whiteboard(config);
DescriptionCreate whiteboard object
Input parameters

json config - Json structure with configuration properties

  • string strokeColor - color of the drawing line (default: '#000000')
  • int strokeWidth - width of the drawing line (default: 5)
  • string lineCap - style of the canvas line cap (default: 'round')
  • string lineJoin - style of the canvas line join (default: 'round')
Example input
var wh = new whiteboard({
	strokeColor: "#000000",
	strokeWidth: 5,
	lineCap: "round",
	lineJoin: "round"
});

Enable drawing mode

Back to method list

Method namedrawOn()
DescriptionEnables drawing on the website

Disable drawing mode

Back to method list

Method namedrawOff()
DescriptionDisables drawing on the website

Change line width

Back to method list

Method namesetWidth(width)
DescriptionSets new width of the drawing line
Input parameters

int width - width of line in pixels

Change line color

Back to method list

Method namesetColor(color)
DescriptionSets new color of the drawing line
Input parameters

string color - color of line, any CSS valid color

Change line cap

Back to method list

Method namesetLineCap(cap)
DescriptionSets new style of a line cap
Input parameters

string cap - line cap style (values: butt, round and square)

Change line join

Back to method list

Method namesetLineJoin(join)
DescriptionSets new style of a line join
Input parameters

string join - line join style (values: round, bevel and miter)

Clear drawing

Back to method list

Method nameclear()
DescriptionErase everything that was drawn

Import drawing

Back to method list

Method nameimportDraw(draw)
DescriptionImport and render previously exported drawing
Input parameters

string draw - exported drawing

Export drawing

Back to method list

Method nameexportDraw()
DescriptionReturns string with exported current drawing, to be saved in database or imported to other user

Save drawing

Back to method list

Method namesaveDraw()
DescriptionSaves drawing in local storage, or cookie as a fallback, if storage is not supported. But due to size restrictions, some drawing might not be saved in cookies

Load drawing

Back to method list

Method namesaveDraw()
DescriptionLoads previously saved drawing from local storage or cookies

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus