8
I need to make an area in the form that the user digitally signs with a touch screen pen to store their signature.
As if the same was writing on a paper but on screen.
I read about Canvas but only learned to make lines, rectangles or shapes.
Follows code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PresTO - Assinatura Digital</title>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#canvas{
background-color: #EFC;
}
</style>
<script type="text/javascript">
var canvasWidth = 300;
var canvasHeight = 150;
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
</script>
</head>
<body>
<div id="canvasDiv"></div>
</body>
</html>
Take a little peek here. See if it helps you...
– JuniorNunes
@Juniornunes did exactly as example however it does not work. I will take another look. thanks
– Ezequiel Tavares
@Ezequieltavares can show what you tried to code?
– Lucas
@I'mBlueDaBaDee edited the question with the code that useii hug
– Ezequiel Tavares
Notice Ezequiel that in your console, you are error
– andrepaulo