[clinton/MarylandElectronicPetitionSignature.git] / Green-Party-petition.html

<html>
<head>
<title>SBE Policy 2020-01: Temporary Electronic Petition Signature Acceptance</title>

<script type="text/javascript">
    // Variables for referencing the canvas and 2dcanvas context
    var canvas,ctx;

    // Variables to keep track of the mouse position and left-button status 
    var mouseX,mouseY,mouseDown=0;

    // Variables to keep track of the touch position
    var touchX,touchY;

    // Draws a dot at a specific position on the supplied canvas name
    // Parameters are: A canvas context, the x position, the y position, the size of the dot
    function drawDot(ctx,x,y,size) {
        // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)
        r=0; g=0; b=0; a=255;

        // Select a fill style
        ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";

        // Draw a filled circle
        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    } 

    // Clear the canvas context using the canvas width and height
    function clearCanvas(canvas,ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    // Keep track of the mouse button being pressed and draw a dot at current location
    function sketchpad_mouseDown() {
        mouseDown=1;
        drawDot(ctx,mouseX,mouseY,1);
    }

    // Keep track of the mouse button being released
    function sketchpad_mouseUp() {
        mouseDown=0;
    }

    // Keep track of the mouse position and draw a dot if mouse button is currently pressed
    function sketchpad_mouseMove(e) { 
        // Update the mouse co-ordinates when moved
        getMousePos(e);

        // Draw a dot if the mouse button is currently being pressed
        if (mouseDown==1) {
            drawDot(ctx,mouseX,mouseY,1);
        }
    }

    // Get the current mouse position relative to the top-left of the canvas
    function getMousePos(e) {
        if (!e)
            var e = event;

        if (e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if (e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
     }

    // Draw something when a touch start is detected
    function sketchpad_touchStart() {
        // Update the touch co-ordinates
        getTouchPos();

        drawDot(ctx,touchX,touchY,1);

        // Prevents an additional mousedown event being triggered
        event.preventDefault();
    }

    // Draw something and prevent the default scrolling when touch movement is detected
    function sketchpad_touchMove(e) { 
        // Update the touch co-ordinates
        getTouchPos(e);

        // 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.
        drawDot(ctx,touchX,touchY,1); 

        // Prevent a scrolling action as a result of this touchmove triggering.
        event.preventDefault();
    }

    // Get the touch position relative to the top-left of the canvas
    // When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
    // but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
    // "target.offsetTop" to get the correct values in relation to the top left of the canvas.
    function getTouchPos(e) {
        if (!e)
            var e = event;

        if(e.touches) {
            if (e.touches.length == 1) { // Only deal with one finger
                var touch = e.touches[0]; // Get the information for finger #1
                touchX=touch.pageX-touch.target.offsetLeft;
                touchY=touch.pageY-touch.target.offsetTop;
            }
        }
    }


    // Set-up the canvas and add our event handlers after the page has loaded
    function init() {
        // Get the specific canvas element from the HTML document
        canvas = document.getElementById('sketchpad');

        // If the browser supports the canvas tag, get the 2d drawing context for this canvas
        if (canvas.getContext)
            ctx = canvas.getContext('2d');

        // Check that we have a valid context to draw on/with before adding event handlers
        if (ctx) {
            // React to mouse events on the canvas, and mouseup on the entire document
            canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
            canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
            window.addEventListener('mouseup', sketchpad_mouseUp, false);

            // React to touch events on the canvas
            canvas.addEventListener('touchstart', sketchpad_touchStart, false);
            canvas.addEventListener('touchmove', sketchpad_touchMove, false);
        }
        document.getElementById("canvasimg").style.display = "none";
        document.getElementById("canvasimg_bk").style.display = "none";
    }
    function saveCanvas(canvas,ctx) {
        //var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
        // here is the most important part because if you dont replace you will get a DOM 18 exception.
        //window.location.href=image; // it will save locally
         var link = document.getElementById('link');
         link.setAttribute('download', 'Green-Party-petition.png');
         link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
         link.click();
        
    }
    

</script>

<style>
/* Some CSS styling */
#sketchpadapp {
    /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 800px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#sketchpad {
    float:left;
    height:1035px;
    width:800px;
    border:2px solid #888;
    border-radius:4px;
    position:relative; /* Necessary for correct mouse co-ords in Firefox */
}
#clearbutton {
    font-size: 12px;
    padding: 5px;
    -webkit-appearance: none;
    background: #eee;
    border: 1px solid #888;  
}
#nextbutton {
    font-size: 12px;
    padding: 5px;
    -webkit-appearance: none;
    background: #90ee90;
    border: 1px solid #888;  
}
#sharebutton {
    font-size: 12px;
    padding: 5px;
    -webkit-appearance: none;
    background: #fed8b1;
    border: 1px solid #888;  
}
#img.source-image {
  width: 800px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Doc working with */
}
    
/* Style the header */
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Doc working with */
}

</style>
</head>
<body onload="init()">
    <img class="source-image" src="Green-Party-petition.png" alt="" />
    <div class="header" id="myHeader">
        <input type="submit" value="START" id="nextbutton" onclick="imageZoom("myimage", "myresult");">
        <input type="submit" value="NEXT" id="nextbutton" onclick="clearCanvas(canvas,ctx);">
        <input type="submit" value="SAVE to SHARE" id="sharebutton" onclick="saveCanvas(canvas,ctx);">
        <input type="submit" value="BACK" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
        <input type="submit" value="CLEAR" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
        <a id="link"></a>
    </div>
    <div id="sketchpadapp">
        <div class="rightside">
            <canvas id="sketchpad" height="1035" width="800">
            </canvas>
        </div>
    </div>
</body>
</html>
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;
5ac788df	39	drawDot(ctx,mouseX,mouseY,1);
e8d2a6c0 PM	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) {
5ac788df	54	drawDot(ctx,mouseX,mouseY,1);
e8d2a6c0 PM	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
5ac788df	78	drawDot(ctx,touchX,touchY,1);
e8d2a6c0 PM	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.
5ac788df	90	drawDot(ctx,touchX,touchY,1);
e8d2a6c0 PM	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	}
3d3738b7 PM	134	document.getElementById("canvasimg").style.display = "none";
3d3738b7 PM	135	document.getElementById("canvasimg_bk").style.display = "none";
e8d2a6c0	136	}
0e86b350	137	function saveCanvas(canvas,ctx) {
4ecc5744 PM	138	//var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
	139	// here is the most important part because if you dont replace you will get a DOM 18 exception.
	140	//window.location.href=image; // it will save locally
	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"));
	144	link.click();
	145
3a836be7	146	}
c3385fe9	147
31701f11	148
3a836be7	149
e8d2a6c0 PM	150	</script>
	151
	152	<style>
	153	/* Some CSS styling */
	154	#sketchpadapp {
	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;
	161	user-select: none;
f10b753e	162	width: 800px;
e8d2a6c0 PM	163	position: absolute;
	164	top: 0;
	165	left: 0;
	166	z-index: 0;
	167	}
f10b753e	168
e8d2a6c0 PM	169	#sketchpad {
e8d2a6c0 PM	170	float:left;
f10b753e PM	171	height:1035px;
f10b753e PM	172	width:800px;
e8d2a6c0 PM	173	border:2px solid #888;
	174	border-radius:4px;
	175	position:relative; /* Necessary for correct mouse co-ords in Firefox */
	176	}
	177	#clearbutton {
bf81a77d PM	178	font-size: 12px;
bf81a77d PM	179	padding: 5px;
e8d2a6c0 PM	180	-webkit-appearance: none;
e8d2a6c0 PM	181	background: #eee;
70e2751d	182	border: 1px solid #888;
e8d2a6c0	183	}
0f79d77c PM	184	#nextbutton {
	185	font-size: 12px;
	186	padding: 5px;
	187	-webkit-appearance: none;
	188	background: #90ee90;
	189	border: 1px solid #888;
	190	}
	191	#sharebutton {
	192	font-size: 12px;
	193	padding: 5px;
	194	-webkit-appearance: none;
	195	background: #fed8b1;
	196	border: 1px solid #888;
	197	}
e8d2a6c0	198	#img.source-image {
f10b753e	199	width: 800px;
e8d2a6c0 PM	200	position: absolute;
	201	top: 0;
	202	left: 0;
e1264604	203	z-index: -1; /* Doc working with */
e8d2a6c0	204	}
70e2751d PM	205
	206	/* Style the header */
	207	.header {
	208	padding: 10px 16px;
	209	background: #555;
	210	color: #f1f1f1;
61c3c843	211	position: absolute;
70e2751d	212	top: 0;
61c3c843 PM	213	left: 0;
61c3c843 PM	214	z-index: 1; /* Doc working with */
70e2751d	215	}
11f1548f	216
e8d2a6c0 PM	217	</style>
e8d2a6c0 PM	218	</head>
e8d2a6c0	219	<body onload="init()">
f10b753e	220	<img class="source-image" src="Green-Party-petition.png" alt="" />
70e2751d	221	<div class="header" id="myHeader">
11f1548f	222	<input type="submit" value="START" id="nextbutton" onclick="imageZoom("myimage", "myresult");">
0f79d77c	223	<input type="submit" value="NEXT" id="nextbutton" onclick="clearCanvas(canvas,ctx);">
0e86b350	224	<input type="submit" value="SAVE to SHARE" id="sharebutton" onclick="saveCanvas(canvas,ctx);">
61c3c843	225	<input type="submit" value="BACK" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
0f79d77c	226	<input type="submit" value="CLEAR" id="clearbutton" onclick="clearCanvas(canvas,ctx);">
4ecc5744	227	<a id="link"></a>
70e2751d	228	</div>
e8d2a6c0 PM	229	<div id="sketchpadapp">
e8d2a6c0 PM	230	<div class="rightside">
f10b753e	231	<canvas id="sketchpad" height="1035" width="800">
e8d2a6c0 PM	232	</canvas>
	233	</div>
	234	</div>
	235	</body>
	236	</html>