|
2 | 2 | <html> |
3 | 3 | <head> |
4 | 4 | <title>Sketch.js - Simple Canvas-based Drawing for jQuery</title> |
5 | | - <link href='http://fonts.googleapis.com/css?family=Yellowtail|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'> |
6 | 5 | <script src="http://code.jquery.com/jquery-latest.js"></script> |
7 | 6 | <script src='src/sketch.js'></script> |
| 7 | + <link href='http://fonts.googleapis.com/css?family=Yellowtail|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'/> |
| 8 | + |
8 | 9 | <style type='text/css'> |
9 | 10 | body { font-family: "Open Sans", sans-serif; color: #444; } |
10 | 11 | h1, h2, h3, h4 { font-family: Yellowtail; font-weight: normal; color: #06a; } |
|
32 | 33 |
|
33 | 34 | code { background: #cff; } |
34 | 35 |
|
| 36 | + #colors_tools { margin-bottom: 10px; } |
35 | 37 | #colors_tools a { |
36 | 38 | border: 1px solid black; width: 30px; height: 30px; line-height: 30px; vertical-align: middle; text-align: center; text-decoration: none; display: inline-block; color: black; font-weight: bold; |
37 | 39 | } |
|
42 | 44 | <header> |
43 | 45 | <h1>Sketch.js</h1> |
44 | 46 | <p>Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases |
45 | | - upon which visitors can draw.</p> |
| 47 | + upon which visitors can draw. The code is partially inspired by <a href='http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/'>William Malone's drawing app tutorial</a> |
| 48 | + as well as <a href='http://canvaspaint.org'>CanvasPaint</a>.</p> |
46 | 49 | </header> |
47 | 50 |
|
| 51 | + <article class='info'> |
| 52 | + <h1>Documentation</h1> |
| 53 | + |
| 54 | + <p>To use Sketch.js you will need to call the <code>.sketch()</code> plugin method |
| 55 | + on a single HTML 5 Canvas element.</p> |
| 56 | + |
| 57 | + <pre class='source'>$('#mycanvas').sketch()</pre> |
| 58 | + |
| 59 | + <p>This will automatically set up a sketch canvas upon which the user can |
| 60 | + draw using the mouse or touch events on supported devices.</p> |
| 61 | + |
| 62 | + <h2>Options</h2> |
| 63 | + |
| 64 | + <p>An options hash may be passed into the sketch function with the following properties:</p> |
| 65 | + |
| 66 | + <pre class='source'>{ |
| 67 | + toolLinks: true, // when true, automatically create tool links |
| 68 | + defaultTool: 'marker', // sets the default tool |
| 69 | + defaultColor: '#000000', // sets the default drawing color |
| 70 | + defaultSize: 5 // sets the default drawing size |
| 71 | +}</pre> |
| 72 | + </article> |
| 73 | + |
48 | 74 | <article class='example'> |
49 | 75 | <h1>Simple Example</h1> |
50 | 76 |
|
@@ -85,6 +111,36 @@ <h1>Changing Color/Size</h1> |
85 | 111 | </script> |
86 | 112 | </div> |
87 | 113 | </article> |
| 114 | + |
| 115 | + <article class='info'> |
| 116 | + <h1>Compatibility</h1> |
| 117 | + |
| 118 | + <p>Sketch.js has been tested on Chrome (OS X), Firefox (OS X), Safari (OS X), |
| 119 | + Android Browser (Honeycomb 3.1). It suffers significant performance degradation |
| 120 | + on mobile browsers due to general HTML5 Canvas performance issues.</p> |
| 121 | + |
| 122 | + <h1>License</h1> |
| 123 | + |
| 124 | + <p>Copyright (C) 2011 by Michael Bleigh and Intridea, Inc.</p> |
| 125 | + |
| 126 | + <p>Permission is hereby granted, free of charge, to any person obtaining a copy |
| 127 | + of this software and associated documentation files (the "Software"), to deal |
| 128 | + in the Software without restriction, including without limitation the rights |
| 129 | + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 130 | + copies of the Software, and to permit persons to whom the Software is |
| 131 | + furnished to do so, subject to the following conditions:</p> |
| 132 | + |
| 133 | + <p>The above copyright notice and this permission notice shall be included in |
| 134 | + all copies or substantial portions of the Software.</p> |
| 135 | + |
| 136 | + <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 137 | + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 138 | + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 139 | + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 140 | + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 141 | + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 142 | + THE SOFTWARE.</p> |
| 143 | + </article> |
88 | 144 | </div> |
89 | 145 | <script type='text/javascript'> |
90 | 146 | var escapeHTML = function(s) { |
|
0 commit comments