Sunday, 4 August 2013

What is the use of Canvas Element in HTML5 ?



The canvas element is used to draw paths, boxes, circles, characters, and adding images  on a web page by using javascript,
the <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Draw a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text onto the canvas:

example: 
<body><canvas id="myCanvas" width="200" height="100"></canvas>
   <script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myCanvas=myCanvas.getContext("2d");
myCanvas.fillStyle="#13a3ff";
myCanvas.fillRect(0,0,150,75);
</script>
</body>

Canvas - Gradients
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
   <script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//  gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"#0b90c1");
grd.addColorStop(1,"#1e6d8a");

// color
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>

Canvas - Text
<body>

<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="32px Arial";
ctx.fillText("Just Effects",100,100);
</script>

</body>

Canvas - Line

<body>
<canvas id="myCanvas" width="578" height="500"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 550);
      context.lineTo(350, 50);
      context.stroke();
</script>
</body>

HTML5 Canvas Text Font, Size, Text Align, Text Color and Style
<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.font = 'bold 48pt arial';
      context.fillStyle = '#156f90';
    context.textAlign = 'center';
      context.fillText('Justeffects!', 150, 100);
    </script>
  </body>

Canvas Rotate Transform
<body>
    <canvas id="myCanvas" width="700" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 200;
      var rectHeight = 50;

      // translate context to center of canvas
      context.translate(canvas.width / 2, canvas.height / 10);

      // rotate 45 degrees clockwise
      context.rotate(Math.PI / 6);

      context.fillStyle = '#156f90';
      context.fillRect(rectWidth / -10, rectHeight / -10, rectWidth, rectHeight);
    </script>
  </body>