CampusGroups -TESTGROUP for features

Become part of our vibrant community.

JOIN

 

About Us

test

1

Officers

23

Members

24

Events

0

Emails/Newsletters

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Signature</title>
<style>
  #sig-canvas %7B
    border: 2px dotted #CCCCCC;
    border-radius: 15px;
    cursor: crosshair;
  %7D
</style>
</head>
<body>
<!-- Content -->
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>E-Signature</h1>
      <p>Sign in the canvas below and save your signature as an image!</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <canvas id="sig-canvas" width="620" height="160">Get a better browser, bro.</canvas>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-primary" id="sig-submitBtn">Submit Signature</button>
      <button class="btn btn-default" id="sig-clearBtn">Clear Signature</button>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-12">
      <textarea id="sig-dataUrl" class="form-control" rows="5">Data URL for your signature will go here!</textarea>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-12">
      <img id="sig-image" src="" alt="Your signature will go here!"/>
    </div>
  </div>
</div>

<script>
  (function() %7B
    window.requestAnimFrame = (function(callback) %7B
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimaitonFrame ||
        function(callback) %7B
          window.setTimeout(callback, 1000 / 60);
        %7D;
    %7D)();

    var canvas = document.getElementById("sig-canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#222222";
    ctx.lineWidth = 4;

    var drawing = false;
    var mousePos = %7Bx: 0, y: 0%7D;
    var lastPos = mousePos;

    canvas.addEventListener("mousedown", function(e) %7B
      drawing = true;
      lastPos = getMousePos(canvas, e);
    %7D, false);

    canvas.addEventListener("mouseup", function(e) %7B
      drawing = false;
    %7D, false);

    canvas.addEventListener("mousemove", function(e) %7B
      mousePos = getMousePos(canvas, e);
    %7D, false);

    // Add touch event support for mobile
    canvas.addEventListener("touchstart", function(e) %7B%7D, false);

    canvas.addEventListener("touchmove", function(e) %7B
      var touch = e.touches[0];
      var me = new MouseEvent("mousemove", %7B
        clientX: touch.clientX,
        clientY: touch.clientY
      %7D);
      canvas.dispatchEvent(me);
    %7D, false);

    canvas.addEventListener("touchstart", function(e) %7B
      mousePos = getTouchPos(canvas, e);
      var touch = e.touches[0];
      var me = new MouseEvent("mousedown", %7B
        clientX: touch.clientX,
        clientY: touch.clientY
      %7D);
      canvas.dispatchEvent(me);
    %7D, false);

    canvas.addEventListener("touchend", function(e) %7B
      var me = new MouseEvent("mouseup", %7B%7D);
      canvas.dispatchEvent(me);
    %7D, false);

    function getMousePos(canvasDom, mouseEvent) %7B
      var rect = canvasDom.getBoundingClientRect();
      return %7B
        x: mouseEvent.clientX - rect.left,
        y: mouseEvent.clientY - rect.top
      %7D
    %7D

    function getTouchPos(canvasDom, touchEvent) %7B
      var rect = canvasDom.getBoundingClientRect();
      return %7B
        x: touchEvent.touches[0].clientX - rect.left,
        y: touchEvent.touches[0].clientY - rect.top
      %7D
    %7D

    function renderCanvas() %7B
      if (drawing) %7B
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(mousePos.x, mousePos.y);
        ctx.stroke();
        lastPos = mousePos;
      %7D
    %7D

    // Prevent scrolling when touching the canvas
    document.body.addEventListener("touchstart", function(e) %7B
      if (e.target == canvas) %7B
        e.preventDefault();
      %7D
    %7D, false);
    document.body.addEventListener("touchend", function(e) %7B
      if (e.target == canvas) %7B
        e.preventDefault();
      %7D
    %7D, false);
    document.body.addEventListener("touchmove", function(e) %7B
      if (e.target == canvas) %7B
        e.preventDefault();
      %7D
    %7D, false);

    (function drawLoop() %7B
      requestAnimFrame(drawLoop);
      renderCanvas();
    %7D)();

    function clearCanvas() %7B
      canvas.width = canvas.width;
    %7D

    // Set up the UI
    var sigText = document.getElementById("sig-dataUrl");
    var sigImage = document.getElementById("sig-image");
    var clearBtn = document.getElementById("sig-clearBtn");
    var submitBtn = document.getElementById("sig-submitBtn");
    clearBtn.addEventListener("click", function(e) %7B
      clearCanvas();
      sigText.innerHTML = "Data URL for your signature will go here!";
      sigImage.setAttribute("src", "");
    %7D, false);
    submitBtn.addEventListener("click", function(e) %7B
      var dataUrl = canvas.toDataURL();
      sigText.innerHTML = dataUrl;
      sigImage.setAttribute("src", dataUrl);
    %7D, false);

  %7D)();
</script>
</body>
</html>
​

 

Members Benefits

Membership benefits include (define your member benefits under group settings)

Events & Activities

Be the first to know about what we have planned and add our group calendar to your schedule.

Exclusive Resources

Get our newsletter and stay in the loop.

Connnections

Meeting new students with shared interest

Our Team

Brilynn Winkleblack Profile

Brilynn Winkleblack

Vice-President

E: activities@cornell.edu
P:

CampusGroups -TESTGROUP for features


Ithaca New York 14853
United States