3 <title>SBE Policy
2020-
01: Temporary Electronic Petition Signature Acceptance
</title>
5 <script type=
"text/javascript">
6 // Variables for referencing the canvas and 2dcanvas context
9 // Variables to keep track of the mouse position and left-button status
10 var mouseX
,mouseY
,mouseDown
=0;
12 // Variables to keep track of the touch position
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)
21 // Select a fill style
22 ctx
.fillStyle
= "rgba("+r
+","+g
+","+b
+","+(a
/255)+")";
24 // Draw a filled circle
26 ctx
.arc(x
, y
, size
, 0, Math
.PI
*2, true);
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 var img
= document
.getElementById("petition");
35 ctx
.drawImage(img
, 10, 10);
38 // Keep track of the mouse button being pressed and draw a dot at current location
39 function sketchpad_mouseDown() {
41 drawDot(ctx
,mouseX
,mouseY
,1);
44 // Keep track of the mouse button being released
45 function sketchpad_mouseUp() {
49 // Keep track of the mouse position and draw a dot if mouse button is currently pressed
50 function sketchpad_mouseMove(e
) {
51 // Update the mouse co-ordinates when moved
54 // Draw a dot if the mouse button is currently being pressed
56 drawDot(ctx
,mouseX
,mouseY
,1);
60 // Get the current mouse position relative to the top-left of the canvas
61 function getMousePos(e
) {
75 // Draw something when a touch start is detected
76 function sketchpad_touchStart() {
77 // Update the touch co-ordinates
80 drawDot(ctx
,touchX
,touchY
,1);
82 // Prevents an additional mousedown event being triggered
83 event
.preventDefault();
86 // Draw something and prevent the default scrolling when touch movement is detected
87 function sketchpad_touchMove(e
) {
88 // Update the touch co-ordinates
91 // 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.
92 drawDot(ctx
,touchX
,touchY
,1);
94 // Prevent a scrolling action as a result of this touchmove triggering.
95 event
.preventDefault();
98 // Get the touch position relative to the top-left of the canvas
99 // When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
100 // but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
101 // "target.offsetTop" to get the correct values in relation to the top left of the canvas.
102 function getTouchPos(e
) {
107 if (e
.touches
.length
== 1) { // Only deal with one finger
108 var touch
= e
.touches
[0]; // Get the information for finger #1
109 touchX
=touch
.pageX
-touch
.target
.offsetLeft
;
110 touchY
=touch
.pageY
-touch
.target
.offsetTop
;
116 // Set-up the canvas and add our event handlers after the page has loaded
118 // Get the specific canvas element from the HTML document
119 canvas
= document
.getElementById('sketchpad');
121 // If the browser supports the canvas tag, get the 2d drawing context for this canvas
122 if (canvas
.getContext
)
123 ctx
= canvas
.getContext('2d');
125 // Check that we have a valid context to draw on/with before adding event handlers
127 var img
= document
.getElementById("petition");
128 ctx
.drawImage(img
, 10, 10);
129 // React to mouse events on the canvas, and mouseup on the entire document
130 canvas
.addEventListener('mousedown', sketchpad_mouseDown
, false);
131 canvas
.addEventListener('mousemove', sketchpad_mouseMove
, false);
132 window
.addEventListener('mouseup', sketchpad_mouseUp
, false);
134 // React to touch events on the canvas
135 canvas
.addEventListener('touchstart', sketchpad_touchStart
, false);
136 canvas
.addEventListener('touchmove', sketchpad_touchMove
, false);
140 function saveCanvas(canvas
,ctx
) {
141 var link
= document
.getElementById('link');
142 link
.setAttribute('download', 'Green-Party-petition.png');
143 link
.setAttribute('href', canvas
.toDataURL("image/png").replace("image/png", "image/octet-stream"));
153 /* Some CSS styling */
155 /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
156 -webkit-touch-callout: none;
157 -webkit-user-select: none;
158 -khtml-user-select: none;
159 -moz-user-select: none;
160 -ms-user-select: none;
173 border:
2px solid #
888;
175 position:relative; /* Necessary for correct mouse co-ords in Firefox */
180 -webkit-appearance: none;
182 border:
1px solid #
888;
187 -webkit-appearance: none;
189 border:
1px solid #
888;
194 -webkit-appearance: none;
196 border:
1px solid #
888;
203 z-index: -
1; /* Doc working with */
206 /* Style the header */
214 z-index:
1; /* Doc working with */
219 <body onload=
"init()">
220 <img id=
"petition" src=
"Green-Party-petition.png" alt=
"petition" style='display:none;'
>
221 <div class=
"header" id=
"myHeader">
222 <input type=
"submit" value=
"START" id=
"nextbutton" onclick=
"imageZoom("myimage
", "myresult
");">
223 <input type=
"submit" value=
"NEXT" id=
"nextbutton" onclick=
"clearCanvas(canvas,ctx);">
224 <input type=
"submit" value=
"SAVE to SHARE" id=
"sharebutton" onclick=
"saveCanvas(canvas,ctx);">
225 <input type=
"submit" value=
"BACK" id=
"clearbutton" onclick=
"clearCanvas(canvas,ctx);">
226 <input type=
"submit" value=
"CLEAR" id=
"clearbutton" onclick=
"clearCanvas(canvas,ctx);">
229 <div id=
"sketchpadapp">
230 <div class=
"rightside">
231 <canvas id=
"sketchpad" height=
"1035" width=
"800">