Home/ Questions/Q 8491727
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T22:30:57+00:00

I need to add mouse event via Javascript to below code… I have already

  • 0

I need to add mouse event via Javascript to below code… I have already added touch events in order to test in desktop browsers I need to add mouse events .. I tried adding mouse event to addEventListener but seems to not work I’m not pretty sure what was wrong…

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="utf-8"> 
<meta name="viewport" content="width=768px, maximum-scale=1.0" /> 
 <title>rsaCanvas</title> 
<script type="text/javascript" charset="utf-8"> 
window.addEventListener('load',function(){
    // get the canvas element and its context
    var canvas = document.getElementById('rsaCanvas');
    var insertImage = document.getElementById('insert');
    var context = canvas.getContext('2d');

    //load image and annotation method
    var loadData = {
        imageLoad: function(){
            var img = new Image();
            img.src = 'the_scream.jpg';
            context.drawImage(img,0,0);
        }
    };

    // create a drawer which tracks touch movements
    var drawer = {
        isDrawing: false,
        touchstart: function(coors){
            context.beginPath();
            context.moveTo(coors.x, coors.y);
            this.isDrawing = true;
        },
        touchmove: function(coors){
            if (this.isDrawing) {
                context.lineTo(coors.x, coors.y);
                context.stroke();
            }
        },
        touchend: function(coors){
            if (this.isDrawing) {
                this.touchmove(coors);
                this.isDrawing = false;
            }
        }
    };

    // create a function to pass touch events and coordinates to drawer
    function draw(event){
        // get the touch coordinates
        var coors = {
            x: event.targetTouches[0].pageX,
            y: event.targetTouches[0].pageY
        };
        // pass the coordinates to the appropriate handler
        drawer[event.type](coors);
    }

    // attach the touchstart, touchmove, touchend event listeners.
    canvas.addEventListener('touchstart',draw, false);
    canvas.addEventListener('touchmove',draw, false);
    canvas.addEventListener('touchend',draw, false);


    insertImage.addEventListener('click',loadData.imageLoad, false);

    // prevent elastic scrolling
    document.body.addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);   // end body.onTouchMove

},false);   // end window.onLoad
</script> 

<style>
    #rsaCanvas{border:5px solid #000;}
</style>    

 </head> 
 <body> 
<div id="container"> 
  <canvas id="rsaCanvas" width="400" height="500"> 
    Sorry, your browser is not supported.
  </canvas> 
  <button id="insert">Insert Image</button> 
</div> 
  </body> 
   </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try this one. 

    function init () {
  // ...
  // Attach the mousemove event handler.
  canvas.addEventListener('mousemove', ev_mousemove, false);
}

// The mousemove event handler.
var started = false;
function ev_mousemove (ev) {
  var x, y;

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // The event handler works like a drawing pencil which tracks the mouse 
  // movements. We start drawing a path made up of lines.
  if (!started) {
    context.beginPath();
    context.moveTo(x, y);
    started = true;
  } else {
    context.lineTo(x, y);
    context.stroke();
  }
}

    source http://dev.opera.com/articles/view/html5-canvas-painting/

    • 0