Home/ Questions/Q 6926495
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:55:33+00:00

I’ try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/ . It works on

  • 0

I’ try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/. It works on Firefox 8.0.1 and Opera 11.52.

Then I modified the code put the canvas into a table cell and stop working.
I tried to put canvas outside the table and absolute positioned the canvas on a cell table still doesn’t work.
The above problem happened only on Firefox, running well on Opera.

Here’s the code

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Sign-In</title>
    <style type="text/css"><!--
      #imageView { border: 1px solid #000; }
    --></style>
  </head>
  <body>
    <p>Please fill in name and id card no. Then sign-in on provided box</p>
    <table>
    <tr><td>Full Name</td><td><input name="name"><td>   </tr>
    <tr><td>ID Card No</td><td><input name="idcard"><td>    </tr>
    <tr><td>Signature</td><td>
    <div id="container">
      <canvas id="imageView" width="200" height="100">      </canvas>
    </div>
    </td>   </tr>
</table>
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script>
</body></html>

Any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, here is your code in jsfiddle: http://jsfiddle.net/7PRDq/

    The problem is almost certainly the mouse handling code giving a bad X,Y in Firefox. If you try to draw a signature in the upper-left corner of the box you’ll see that it is drawing with an incorrect offset.

    If you make the canvas 2000×1000 instead of 200×100 you’ll see the problem much more clearly!

    You’ll need to find more modern mouse code for FireFox.

    • 0