Using Canvas Tag in Opera 9.5 Mobile on Windows Mobile 6.1 Treo 800w

Question

Is it possible to use the tag to capture an electronic signature using a stylus? I have an example that works on Desktop Opera, however it fails on windows mobile version of opera.

when I tap on the canvas area Opera simply "zooms" the screen.

here is my html Canvas Paint - Example 5

Drawing tool: Pencil

<div id="container"> 
  <canvas id="imageView" width="400" height="300" tabindex="1">
    <p>Unfortunately, your browser is currently unsupported by our web 
    application.  We are sorry for the inconvenience. Please use one of the 
    supported browsers listed below, or draw the image you want using an 
    offline tool.</p> 
    <p>Supported browsers: <a href="http://www.opera.com"&gt;Opera&lt;/a&gt;, <a 
      href="http://www.mozilla.com"&gt;Firefox&lt;/a&gt;, <a 
      href="http://www.apple.com/safari"&gt;Safari&lt;/a&gt;, and <a 
      href="http://www.konqueror.org"&gt;Konqueror&lt;/a&gt;.&lt;/p&gt; 
  </canvas> 
</div> 

//

here is my javascript:

// Keep everything in anonymous function, called on window load. if(window.addEventListener) { window.addEventListener('load', function () { var canvas, context, canvaso, contexto;

// The active tool instance. var tool; var tool_default = 'pencil';

function init () { // Find the canvas element. canvaso = document.getElementById('imageView'); if (!canvaso) { alert('Error: I cannot find the canvas element!'); return; }

if (!canvaso.getContext) {
  alert('Error: no canvas.getContext!');
  return;
}

// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
  alert('Error: failed to getContext!');
  return;
}

// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
  alert('Error: I cannot create a new canvas element!');
  return;
}

canvas.id     = 'imageTemp';
canvas.width  = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);

context = canvas.getContext('2d');

// Get the tool select input.
var tool_select = document.getElementById('dtool');
if (!tool_select) {
  alert('Error: failed to get the dtool element!');
  return;
}
tool_select.addEventListener('change', ev_tool_change, false);

// Activate the default tool.
if (tools[tool_default]) {
  tool = new tools[tool_default]();
  tool_select.value = tool_default;
}

// Attach the mousedown, mousemove and mouseup event listeners.

canvas.addEventListener('click', ev_canvas, false); canvas.addEventListener('mousedown', ev_canvas, false); canvas.addEventListener('mousemove', ev_canvas, false); canvas.addEventListener('mouseup', ev_canvas, false); }

// The general-purpose event handler. This function just determines the mouse // position relative to the canvas element. function ev_canvas (ev) { if (ev.layerX || ev.layerX == 0) { // Firefox ev._x = ev.layerX; ev._y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera ev._x = ev.offsetX; ev._y = ev.offsetY; }

// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
  func(ev);
}

}

// The event handler for any changes made to the tool selector. function ev_tool_change (ev) { if (tools[this.value]) { tool = new toolsthis.value; } }

// This function draws the #imageTemp canvas on top of #imageView, after which // #imageTemp is cleared. This function is called each time when the user // completes a drawing operation. function img_update () { contexto.drawImage(canvas, 0, 0); context.clearRect(0, 0, canvas.width, canvas.height); }

// This object holds the implementation of each drawing tool. var tools = {};

// The drawing pencil. tools.pencil = function () { var tool = this; // this.started = false; this.started = true;

//Mike Butcher added  
   this.click = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
    alert(ev._x);
};


// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context.beginPath();
    context.moveTo(ev._x, ev._y);
    tool.started = true;
};

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button).
this.mousemove = function (ev) {
  if (tool.started) {
    context.lineTo(ev._x, ev._y);
    context.stroke();
  }
};

// This is called when you release the mouse button.
this.mouseup = function (ev) {
  if (tool.started) {
    tool.mousemove(ev);
    tool.started = false;
    img_update();
  }
};

};

init();

}, false); }

Please assist if you have any input. I have tried everthing I can think of for the past couple weeks.

Answer 1

It sounds like you need to use the event.preventDefault method to prevent the default zoom behavior.

Answer 2

Using the code above, where exactly would I put the event.PreventDefault?

Answer 3

just read your question and a question poped out. how can i, if i want to call the pencil function from a command button rather than the list box. I am new to javascript and webtechnologies as i am a student.