This is a re-usable drawing library for html5 written in javascript. It supports simple drawing tools, such as shapes and images, and containers with clipping. There are two static examples and one animated example.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
animation.css
cherry.jpg
containers.png
doodle-library-skeleton.js
doodle-library-skeletonDraft.js
doodleCrecord.html
elect.png
kitty.jpg
mario.jpg
myDoodle.js
p2-containers-test.html
p2-containers-test.js
p2-primitives-test.html
p2-primitives-test.js
primitives.png
readme.rtf
utils.js

readme.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 Note:\
the doodle flickers because I made the frame rate myself and the erasing and redrawing doesn't quite sync up. \
\
Sources:\
\
Understanding inheritance/ prototypes:\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/"}}{\fldrslt \cf0 http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/}}\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://phrogz.net/js/classes/OOPinJS2.html"}}{\fldrslt \cf0 http://phrogz.net/js/classes/OOPinJS2.html}}\
\
Drawing primitives:\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://www.w3schools.com/html/html5_canvas.asp"}}{\fldrslt \cf0 http://www.w3schools.com/html/html5_canvas.asp}}\
{\field{\*\fldinst{HYPERLINK "http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm"}}{\fldrslt http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm}}\
{\field{\*\fldinst{HYPERLINK "http://www.html5tutorial.info/html5-canvas-rect.php"}}{\fldrslt http://www.html5tutorial.info/html5-canvas-rect.php}}\
{\field{\*\fldinst{HYPERLINK "http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text"}}{\fldrslt http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text}}\
\
For My Doodle:\
\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://www.w3schools.com/js/js_timing.asp"}}{\fldrslt \cf0 http://www.w3schools.com/js/js_timing.asp}}\
{\field{\*\fldinst{HYPERLINK "http://stackoverflow.com/questions/8777407/uncaught-syntaxerror-unexpected-identifier"}}{\fldrslt 
\b http://stackoverflow.com/questions/8777407/uncaught-syntaxerror-unexpected-identifier}}
\b \
{\field{\*\fldinst{HYPERLINK "http://forums.pinstack.com/f214/html5_animation_examples-118598/"}}{\fldrslt http://forums.pinstack.com/f214/html5_animation_examples-118598/}}
\b0 \
{\field{\*\fldinst{HYPERLINK "http://forum.processing.org/topic/looping-figure-of-eight-animation"}}{\fldrslt http://forum.processing.org/topic/looping-figure-of-eight-animation}}\
{\field{\*\fldinst{HYPERLINK "http://www.w3schools.com/jsref/jsref_obj_math.asp"}}{\fldrslt http://www.w3schools.com/jsref/jsref_obj_math.asp}}\
{\field{\*\fldinst{HYPERLINK "http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing"}}{\fldrslt http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing}}\
\
}