Write on the Javascript screen

Question

Write on the Javascript screen

Navigation

#1 by (8 votes)

7

I need to make an area on the form that the user digitally signs with a touch screen pen to store the signature of the same.

As if he were writing on paper but on screen.

I read about the Canvas but I just learned to make lines, rectangles or shapes.

Followthecode

 <!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><styletype="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>

javascript html5 canvas html5-canvas

asked by anonymous 02.03.2017 / 20:20

1 answer

What is the pointer-events property for? Compare Strings by non-value format

score 8 · Answer 1

Following the example of the link posted by @JuniorNunes.

The Author has left out some parts such as declaring the variables canvasWidth and canvasHeight referring to the size of the area that you can draw (canvas)

Tested with mouse on: IE11, Chrome, Firefox and Edge
Tested touch: touchscreen screen

EDIT
Added equivalents for touch support. since the event triggered by a touch device is not mousedown mouseup and mousemove and touchstart touchend and touchmove , respectively.

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);
}

// Set up touch events for mobile, etc
canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

canvas.addEventListener("touchend", function (e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  canvas.dispatchEvent(mouseEvent);
}, false);

canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  canvas.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the canvas
function getTouchPos(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

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

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  
  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();
  }
}

body {
  background:#eee;
}
#canvas {
  background:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="canvasDiv"></div>