Transform canvas using css - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

Transform canvas using css

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-compat-git.js"></script> 
      <style id="compiled-css" type="text/css">

#viewport, #stage, #myCanvas {/* w w  w.j a  v a2s .c  o  m*/
   width: 300px;
   height: 300px;
   position: absolute;
   top: 0;
   left: 0;
}
#viewport {
   border: 1px solid #000;
   overflow: hidden;
}
#stage {
   perspective: 1000px;
   transform-style: preserve-3d;
}
#myCanvas {
   background-color: green;
   transform-style: preserve-3d;
}
#stuff {
   position: absolute;
   top: 350px;
}


      </style> 
   </head> 
   <body> 
      <div id="viewport"> 
         <div id="stage"> 
            <canvas id="myCanvas" width="300" height="300"></canvas> 
         </div> 
      </div> 
      <div id="stuff"> 
         <button onclick="transformMe()">Transform</button> 
         <input id="blah" type="text" size="45"> 
      </div> 
      <script type="text/javascript">
var counter = 0;
$('#viewport').mousedown(function _drawOnCanvas (e)
{
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var xpos, ypos;
    if (typeof e.offsetX=='undefined')
    {
        xpos = e.originalEvent.layerX;
        ypos = e.originalEvent.layerY;
    }
    else
    {
        xpos = e.offsetX;
        ypos = e.offsetY;
    }
    ctx.fillRect(xpos-5, ypos-5, 10, 10);
});
function transformMe()
{
    counter++;
    var angle = (counter * 30) % 360;
    $('#myCanvas').css('transform','perspective(1000px) rotate3d(5,6,7,' + angle + 'deg)');
    $('input').val('counter: ' + counter + ', angle: ' + angle);
};

      </script>  
   </body>
</html>

Related Tutorials