HTML 5 canvas scale and translate order - Javascript Canvas

Javascript examples for Canvas:Example

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

Description

HTML 5 canvas scale and translate order

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*  www. j  a  v a  2 s  .c o m*/
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}
var width = canvas.width;
var height = canvas.height;
for (var i = 0; i < width; i += 10) {
    ctx.moveTo(i + 0.5, 0);
    ctx.lineTo(i + 0.5, height)
}
for (var i = 0; i < height; i += 10) {
    ctx.moveTo(0, i + 0.5);
    ctx.lineTo(width, i + 0.5)
}
ctx.strokeStyle = 'rgba(0, 0, 0, 0.2);'
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-width * 2, 0);
ctx.lineTo(width * 2, 0);
ctx.moveTo(0, -height * 2);
ctx.lineTo(0, height * 2);
ctx.lineWidth = 8;
ctx.strokeStyle = 'red';
ctx.stroke();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas1" width="300" height="300" style="border: 1px solid black;"></canvas>  
   </body>
</html>

Related Tutorials