Commit | Line | Data |
---|---|---|
e8d2a6c0 PM |
1 | <html> |
2 | <head> | |
3 | <title>SBE Policy 2020-01: Temporary Electronic Petition Signature Acceptance</title> | |
4 | ||
5 | <script type="text/javascript"> | |
6 | // Variables for referencing the canvas and 2dcanvas context | |
7 | var canvas,ctx; | |
8 | ||
9 | // Variables to keep track of the mouse position and left-button status | |
10 | var mouseX,mouseY,mouseDown=0; | |
11 | ||
12 | // Variables to keep track of the touch position | |
13 | var touchX,touchY; | |
14 | ||
15 | // Draws a dot at a specific position on the supplied canvas name | |
16 | // Parameters are: A canvas context, the x position, the y position, the size of the dot | |
17 | function drawDot(ctx,x,y,size) { | |
18 | // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque) | |
19 | r=0; g=0; b=0; a=255; | |
20 | ||
21 | // Select a fill style | |
22 | ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; | |
23 | ||
24 | // Draw a filled circle | |
25 | ctx.beginPath(); | |
26 | ctx.arc(x, y, size, 0, Math.PI*2, true); | |
27 | ctx.closePath(); | |
28 | ctx.fill(); | |
29 | } | |
30 | ||
31 | // Clear the canvas context using the canvas width and height | |
32 | function clearCanvas(canvas,ctx) { | |
33 | ctx.clearRect(0, 0, canvas.width, canvas.height); | |
34 | } | |
35 | ||
36 | // Keep track of the mouse button being pressed and draw a dot at current location | |
37 | function sketchpad_mouseDown() { | |
38 | mouseDown=1; | |
39 | drawDot(ctx,mouseX,mouseY,12); | |
40 | } | |
41 | ||
42 | // Keep track of the mouse button being released | |
43 | function sketchpad_mouseUp() { | |
44 | mouseDown=0; | |
45 | } | |
46 | ||
47 | // Keep track of the mouse position and draw a dot if mouse button is currently pressed | |
48 | function sketchpad_mouseMove(e) { | |
49 | // Update the mouse co-ordinates when moved | |
50 | getMousePos(e); | |
51 | ||
52 | // Draw a dot if the mouse button is currently being pressed | |
53 | if (mouseDown==1) { | |
54 | drawDot(ctx,mouseX,mouseY,12); | |
55 | } | |
56 | } | |
57 | ||
58 | // Get the current mouse position relative to the top-left of the canvas | |
59 | function getMousePos(e) { | |
60 | if (!e) | |
61 | var e = event; | |
62 | ||
63 | if (e.offsetX) { | |
64 | mouseX = e.offsetX; | |
65 | mouseY = e.offsetY; | |
66 | } | |
67 | else if (e.layerX) { | |
68 | mouseX = e.layerX; | |
69 | mouseY = e.layerY; | |
70 | } | |
71 | } | |
72 | ||
73 | // Draw something when a touch start is detected | |
74 | function sketchpad_touchStart() { | |
75 | // Update the touch co-ordinates | |
76 | getTouchPos(); | |
77 | ||
78 | drawDot(ctx,touchX,touchY,12); | |
79 | ||
80 | // Prevents an additional mousedown event being triggered | |
81 | event.preventDefault(); | |
82 | } | |
83 | ||
84 | // Draw something and prevent the default scrolling when touch movement is detected | |
85 | function sketchpad_touchMove(e) { | |
86 | // Update the touch co-ordinates | |
87 | getTouchPos(e); | |
88 | ||
89 | // During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition. | |
90 | drawDot(ctx,touchX,touchY,12); | |
91 | ||
92 | // Prevent a scrolling action as a result of this touchmove triggering. | |
93 | event.preventDefault(); | |
94 | } | |
95 | ||
96 | // Get the touch position relative to the top-left of the canvas | |
97 | // When we get the raw values of pageX and pageY below, they take into account the scrolling on the page | |
98 | // but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and | |
99 | // "target.offsetTop" to get the correct values in relation to the top left of the canvas. | |
100 | function getTouchPos(e) { | |
101 | if (!e) | |
102 | var e = event; | |
103 | ||
104 | if(e.touches) { | |
105 | if (e.touches.length == 1) { // Only deal with one finger | |
106 | var touch = e.touches[0]; // Get the information for finger #1 | |
107 | touchX=touch.pageX-touch.target.offsetLeft; | |
108 | touchY=touch.pageY-touch.target.offsetTop; | |
109 | } | |
110 | } | |
111 | } | |
112 | ||
113 | ||
114 | // Set-up the canvas and add our event handlers after the page has loaded | |
115 | function init() { | |
116 | // Get the specific canvas element from the HTML document | |
117 | canvas = document.getElementById('sketchpad'); | |
118 | ||
119 | // If the browser supports the canvas tag, get the 2d drawing context for this canvas | |
120 | if (canvas.getContext) | |
121 | ctx = canvas.getContext('2d'); | |
122 | ||
123 | // Check that we have a valid context to draw on/with before adding event handlers | |
124 | if (ctx) { | |
125 | // React to mouse events on the canvas, and mouseup on the entire document | |
126 | canvas.addEventListener('mousedown', sketchpad_mouseDown, false); | |
127 | canvas.addEventListener('mousemove', sketchpad_mouseMove, false); | |
128 | window.addEventListener('mouseup', sketchpad_mouseUp, false); | |
129 | ||
130 | // React to touch events on the canvas | |
131 | canvas.addEventListener('touchstart', sketchpad_touchStart, false); | |
132 | canvas.addEventListener('touchmove', sketchpad_touchMove, false); | |
133 | } | |
134 | } | |
135 | </script> | |
136 | ||
137 | <style> | |
138 | /* Some CSS styling */ | |
139 | #sketchpadapp { | |
140 | /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ | |
141 | -webkit-touch-callout: none; | |
142 | -webkit-user-select: none; | |
143 | -khtml-user-select: none; | |
144 | -moz-user-select: none; | |
145 | -ms-user-select: none; | |
146 | user-select: none; | |
f10b753e | 147 | width: 800px; |
e8d2a6c0 PM |
148 | position: absolute; |
149 | top: 0; | |
150 | left: 0; | |
151 | z-index: 0; | |
152 | } | |
f10b753e | 153 | |
e8d2a6c0 PM |
154 | #sketchpad { |
155 | float:left; | |
f10b753e PM |
156 | height:1035px; |
157 | width:800px; | |
e8d2a6c0 PM |
158 | border:2px solid #888; |
159 | border-radius:4px; | |
160 | position:relative; /* Necessary for correct mouse co-ords in Firefox */ | |
161 | } | |
162 | #clearbutton { | |
163 | font-size: 15px; | |
164 | padding: 10px; | |
165 | -webkit-appearance: none; | |
166 | background: #eee; | |
167 | border: 1px solid #888; | |
168 | } | |
169 | #img.source-image { | |
f10b753e | 170 | width: 800px; |
e8d2a6c0 PM |
171 | position: absolute; |
172 | top: 0; | |
173 | left: 0; | |
174 | z-index: -1; | |
175 | } | |
176 | </style> | |
177 | </head> | |
178 | ||
179 | <body onload="init()"> | |
f10b753e | 180 | <img class="source-image" src="Green-Party-petition.png" alt="" /> |
e8d2a6c0 PM |
181 | <input type="submit" value="RESET" id="clearbutton" onclick="clearCanvas(canvas,ctx);"> |
182 | <div id="sketchpadapp"> | |
183 | <div class="rightside"> | |
f10b753e | 184 | <canvas id="sketchpad" height="1035" width="800"> |
e8d2a6c0 PM |
185 | </canvas> |
186 | </div> | |
187 | </div> | |
188 | </body> | |
189 | </html> |