Green-Party-petition.html

   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,1);
  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,1);
  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,1);
  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,1);
  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             var img = document.getElementById("petition");
 126             ctx.drawImage(img, 10, 10);
 127             // React to mouse events on the canvas, and mouseup on the entire document
 128             canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
 129             canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
 130             window.addEventListener('mouseup', sketchpad_mouseUp, false);
 131
 132             // React to touch events on the canvas
 133             canvas.addEventListener('touchstart', sketchpad_touchStart, false);
 134             canvas.addEventListener('touchmove', sketchpad_touchMove, false);
 135         }
 136
 137     }
 138     function saveCanvas(canvas,ctx) {
 139          var link = document.getElementById('link');
 140          link.setAttribute('download', 'Green-Party-petition.png');
 141          link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
 142          link.click();
 143
 144     }
 145
 146
 147
 148 </script>
 149
 150 <style>
 151 /* Some CSS styling */
 152 #sketchpadapp {
 153     /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
 154     -webkit-touch-callout: none;
 155     -webkit-user-select: none;
 156     -khtml-user-select: none;
 157     -moz-user-select: none;
 158     -ms-user-select: none;
 159     user-select: none;
 160     width: 800px;
 161     position: absolute;
 162     top: 0;
 163     left: 0;
 164     z-index: 0;
 165 }
 166
 167 #sketchpad {
 168     float:left;
 169     height:1035px;
 170     width:800px;
 171     border:2px solid #888;
 172     border-radius:4px;
 173     position:relative; /* Necessary for correct mouse co-ords in Firefox */
 174 }
 175 #clearbutton {
 176     font-size: 12px;
 177     padding: 5px;
 178     -webkit-appearance: none;
 179     background: #eee;
 180     border: 1px solid #888;
 181 }
 182 #nextbutton {
 183     font-size: 12px;
 184     padding: 5px;
 185     -webkit-appearance: none;
 186     background: #90ee90;
 187     border: 1px solid #888;
 188 }
 189 #sharebutton {
 190     font-size: 12px;
 191     padding: 5px;
 192     -webkit-appearance: none;
 193     background: #fed8b1;
 194     border: 1px solid #888;
 195 }
 196 #img.source-image {
 197   width: 800px;
 198   position: absolute;
 199   top: 0;
 200   left: 0;
 201   z-index: -1; /* Doc working with */
 202 }
 203
 204 /* Style the header */
 205 .header {
 206   padding: 10px 16px;
 207   background: #555;
 208   color: #f1f1f1;
 209   position: absolute;
 210   top: 0;
 211   left: 0;
 212   z-index: 1; /* Doc working with */
 213 }
 214
 215 </style>
 216 </head>
 217 <body onload="init()">
 218     <img id="petition" src="Green-Party-petition.png" alt="petition" style='display:none;'>
 219     <div class="header" id="myHeader">
 220         <input type="submit" value="START" id="nextbutton" onclick="imageZoom("myimage", "myresult");">
 221         <input type="submit" value="NEXT" id="nextbutton" onclick="clearCanvas(canvas,ctx);">
 222         <input type="submit" value="SAVE to SHARE" id="sharebutton" onclick="saveCanvas(canvas,ctx);">
 223         <input type="submit" value="BACK" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
 224         <input type="submit" value="CLEAR" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
 225         <a id="link"></a>
 226     </div>
 227     <div id="sketchpadapp">
 228         <div class="rightside">
 229             <canvas id="sketchpad" height="1035" width="800">
 230             </canvas>
 231         </div>
 232     </div>
 233 </body>
 234 </html>