Home/ Questions/Q 6377711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:54:34+00:00

I’ve got here some javascript code, that implements a signature pad. It works fine

  • 0

I’ve got here some javascript code, that implements a signature pad. It works fine on google chrome but it doesn’t work on firefox. Here is the code:

<html>
   <head>
      <title>Signature Pad</title>
     <script src="lib/jquery-1.6.2.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      //fires when document is loaded and DOM is ready.
      $(document).ready(function() {

  var context, canvas, drawLine, mouseIsPressed, x, y, prevX, prevY, borderWidth;
         canvas = document.getElementById('canvas'); //retrieve canvas from dom by id that we have assigned
         context = canvas.getContext('2d'); //retrieve context
         borderWidth = 5; //let border width will be 5 pixel
         canvas.style.border = borderWidth + " px solid #00F000"; // 5 pixel width solid green border
         drawLine = function(x1, y1, x2, y2)
         {
            context.beginPath(); //create a path
            context.moveTo(x1 - borderWidth, y1 - borderWidth); //move to
            context.lineTo(x2 - borderWidth, y2 - borderWidth); //draw a line
            context.stroke(); // filled with "ink"
            context.closePath(); //close path
         };
         canvas.onmousedown = function(evt)
         {
            mouseIsPressed = true; //save that mouse is pressed
            drawLine(evt.offsetX, evt.offsetY, evt.offsetX + 1, evt.offsetY + + 1) //draw short line that looks like a dot
         };
         canvas.onmouseup = function(evt)
         {
            mouseIsPressed = false; //save that mouse is released
         };
         canvas.onmousemove = function(evt)
         {
            x = evt.offsetX; 
            y = evt.offsetY; //get current X and Y
            if(mouseIsPressed)
            {
               drawLine(prevX, prevY, x, y);  //draw a line on canvas from previous to current point.
            }
            prevX = x; prevY = y; //save previous x and y in both case, weather mouse is pressed or not
         };
      });



      </script>
   <head>
   <body>
      <canvas width="300" height="200" id="canvas"></canvas>
   </body>
</html>

Firefox does support HTML5 Canvas as far as i know. And I do have Version 6. I also checked if javascript was disabled, but that wasn’t the problem. I have no idea why it doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Three things you need to change:
    1. borderWidth + ” px solid #00F000″; The border won’t show in Firefox. Remove the empty before px.
    2. change offsetX to clientX
    3. change offsetY to clientY

    The final code:

    <html> 
   <head> 
      <title>Signature Pad</title> 
     <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
      <script type="text/javascript"> 
      //fires when document is loaded and DOM is ready. 
      $(document).ready(function() { 

  var context, canvas, drawLine, mouseIsPressed, x, y, prevX, prevY, borderWidth; 
         canvas = document.getElementById('canvas'); //retrieve canvas from dom by id that we have assigned 
         context = canvas.getContext('2d'); //retrieve context 
         borderWidth = 5; //let border width will be 5 pixel 
         canvas.style.border = borderWidth + "px solid #00F000"; // 5 pixel width solid green border 

         drawLine = function(x1, y1, x2, y2) 
         { 
            context.beginPath(); //create a path 
            context.moveTo(x1 - borderWidth, y1 - borderWidth); //move to 
            context.lineTo(x2 - borderWidth, y2 - borderWidth); //draw a line 
            context.stroke(); // filled with "ink" 
            context.closePath(); //close path 
         }; 
         canvas.onmousedown = function(evt) 
         { 
            mouseIsPressed = true; //save that mouse is pressed 
            drawLine(evt.clientX, evt.clientY, evt.clientX + 1, evt.clientY + + 1) //draw short line that looks like a dot 
         }; 
         canvas.onmouseup = function(evt) 
         { 
            mouseIsPressed = false; //save that mouse is released 
         }; 
         canvas.onmousemove = function(evt) 
         { 
            x = evt.clientX;  
            y = evt.clientY; //get current X and Y 
            if(mouseIsPressed) 
            { 
               drawLine(prevX, prevY, x, y);  //draw a line on canvas from previous to current point. 
            } 
            prevX = x; prevY = y; //save previous x and y in both case, weather mouse is pressed or not 
         }; 
      }); 

      </script> 
   <head> 
   <body> 
      <canvas width="300" height="200" id="canvas" >Not support</canvas> 
   </body> 
</html>
    • 0