difference between two images start positions in html5 canvas - Javascript Canvas

Javascript examples for Canvas:image

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

Description

difference between two images start positions in html5 canvas

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

body{ background-color: ivory; }
canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//from   www  .j  a v a  2 s .co  m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var x=50;
    var y=50;

    var matrix=[1,0,0,1,0,0];

    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.strokeRect(x,y,200,200);
    translate(100,100);
    scale(0.751,0.751);
    translate(-100,-100);

    ctx.beginPath();
    ctx.strokeStyle="green";
    ctx.strokeRect(x,y,200,200);
    ctx.restore();

    var transformed=getXY();

    ctx.beginPath();
    ctx.arc(transformed.x,transformed.y,5,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fillStyle="red";
    ctx.fill();

    function translate(x,y){
        matrix[4] += matrix[0] * x + matrix[2] * y;
        matrix[5] += matrix[1] * x + matrix[3] * y;
        ctx.translate(x,y);
    }

    function scale(x,y){
        matrix[0] *= x;
        matrix[1] *= x;
        matrix[2] *= y;
        matrix[3] *= y;
        ctx.scale(x,y);
    }

    function rotate(radians){
        var cos = Math.cos(radians);
        var sin = Math.sin(radians);
        var m11 = matrix[0] * cos + matrix[2] * sin;
        var m12 = matrix[1] * cos + matrix[3] * sin;
        var m21 = -matrix[0] * sin + matrix[2] * cos;
        var m22 = -matrix[1] * sin + matrix[3] * cos;
        matrix[0] = m11;
        matrix[1] = m12;
        matrix[2] = m21;
        matrix[3] = m22;
        ctx.rotate(radians);
    }

    function getXY(vertex){
        newX = x * matrix[0] + y * matrix[2] + matrix[4];
        newY = x * matrix[1] + y * matrix[3] + matrix[5];
        return({x:newX,y:newY});
    }
});

      </script> 
   </head> 
   <body> 
      <p>Blue=drawn in original space</p> 
      <p>Green=drawn transformed space</p> 
      <p>Red=drawn in original space but tracked with matrix!</p> 
      <p id="newXY">Tracked x/y=</p> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials