Mouse on center of moving image on canvas - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

Mouse on center of moving image on canvas

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <style id="compiled-css" type="text/css">

html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
   border: 0;
   overflow: hidden; /*  Disable scrollbars */
   display: block;  /* No floating content on sides */
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){// w ww  . j a v  a  2  s .c  o  m
 $(function () {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var img = new Image();
            img.src = "https://www.java2s.com/style/demo/Google-Chrome.png"
            var initialWidth = 500, initialHeight = 500;
            var initialImgWidth = 120, initialImgHeight = 65;
            var wRatio = initialImgWidth/initialWidth, hRatio = initialImgHeight/initialHeight;
            Witch = new witch(100,100);
            initialize();
            animate();
            function initialize() {
              window.addEventListener('resize', resizeCanvas, false);
                resizeCanvas();
            }
            function resizeCanvas() {
              canvas.width = window.innerWidth;
               canvas.height = window.innerHeight - 200;
            }
            function witch(x, y) {
                this.x = x;
                this.y = y;
                this.Teken = function () {
                    ctx.drawImage(img, this.x, this.y, canvas.width*wRatio, canvas.height*hRatio);
                }
            }
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                $("canvas").mousemove(function (event) {
                    var mouseY = event.pageY;
                    var mouseX = event.pageX;
                    Witch.x = event.pageX-((canvas.width*wRatio)/2);
                    Witch.y = event.pageY-((canvas.height*hRatio)/2);
                });
                Witch.Teken();
                ctx.strokeStyle = 'blue';
                ctx.lineWidth = '5';
                ctx.strokeRect(0, 0, canvas.width, canvas.height);
                setTimeout(animate, 6);
                $("#1").html("canvas width" + canvas.width + "<br/>");
                $("#1").append("Canvas Height" + canvas.height + "<br/>");
                $("#1").append("Witch X " + Witch.x + "<br/>");
                $("#1").append("Witch Y" + Witch.y + "<br/>");
            }
        });
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="500" height="500"></canvas> 
      <div id="1"></div> 
      <div id="2"></div> 
      <div id="3"></div>  
   </body>
</html>

Related Tutorials