Skip to content

Instantly share code, notes, and snippets.

@NelsonBrandao

NelsonBrandao/app.js

Created November 20, 2015 14:54
Show Gist options
  • Save NelsonBrandao/dfa791017135dbce5235 to your computer and use it in GitHub Desktop.
Save NelsonBrandao/dfa791017135dbce5235 to your computer and use it in GitHub Desktop.
Download ZIP
Signature Demo
Raw
app.js
var canvas = document.getElementById("myCanvas");
tool.minDistance = 10;
var path;
function onMouseDown(event) {
// Create a new path and select it:
path = new Path();
path.strokeColor = '#00000';
// Add a segment to the path where
// you clicked:
path.add(event.point);
}
function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point);
}
$('#download').click(function() {
var link = document.createElement("a");
link.download = 'image.png';
link.href = canvas.toDataURL();
link.click();
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/paper/dist/paper-full.js"></script>
<script type="text/paperscript" src="app.js" canvas="myCanvas">
</script>
</head>
<body>
<canvas id="myCanvas" resize="true"></canvas>
<a id="download">Download</a>
</body>
</html>
Raw
main.css
* {
margin:0;
padding:0;
box-sizing: border-box;
}
html, body {
width:100%;
height:100%;
}
canvas {
width: 100%;
height: 200px;
display: block;
border: 1px solid black;
border-si
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment