Writing on Javascript screen

Asked

Viewed 5,630 times

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.

inserir a descrição da imagem aqui

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>

javascript html5 canvas html5-canvas
  • 4

    Take a little peek here. See if it helps you...

  • @Juniornunes did exactly as example however it does not work. I will take another look. thanks

  • 1

    @Ezequieltavares can show what you tried to code?

  • @I'mBlueDaBaDee edited the question with the code that useii hug

  • Notice Ezequiel that in your console, you are error

1 answer

9

Following the example of the link posted by @Juniornunes.

The Author left forgotten some parts how to declare the variables canvasWidth and canvasHeight referring to the size of the area that you can draw (canvas)

Mouse tested on: IE11, Chrome, Firefox and Edge
Tested touch: touchscreen note screen

EDIT
Added equivalents to support touch. since the event triggered by a touch device is not the mousedown mouseup and mousemove and yes 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>
<div id="canvasDiv"></div>

  • andrepaulo, look how I used the code and it didn’t work. hug

  • I believe that does not work in IE.. the author said that there is an extra Js to insert to work in IE.. which browser you are testing?

  • firefox and Chrome usage

  • I tested in Firefox, Chrome, IE and Edge, is working... nor by the snippet of my reply Voce can see?

  • I don’t know why but I added the $(Document ready ... and it worked. thanks for the help

  • tested on tablet and does not work. have any idea? because until then had tested on PC

  • I saw this article here, I believe I can help. https://bencentra.com/code/2014/12/html5-canvas-touch-events.html

  • anyway, I updated the response to support touch devices, testing on the screen of my note. I did not test on the tablet

  • andrepaulo, it worked perfectly ... I just noticed that when the orientation changes he is disfigured (this I can solve by locking the orientation of the app to landscape mode) what , (if not to abuse his patience), would perfect the resolution of the layout on the screen, knows some solution?

  • I have no idea how to improve resolution, but I think that would make a beautiful, next question to the stack, don’t you think?

  • well remembered Andrew Paul

Show 6 more comments

Browser other questions tagged javascript html5 canvas html5-canvas

You are not signed in. Login or sign up in order to post.