Canvas in HTML5

In HTML5 as there are many elements, like these elements canvas is also a an element which is used to draw amazing graph with its powerful functionality and decrease the difficulties and increases the easiness. To implement this element, javascript is used with it. Convas is also used for compositions and animations.

Example of Canvas

Not supported

<style>
  canvas{
    border: 2px solid orange;
  }
</style>
<canvas id="myCanvas" width="200" height="100">Not supported</canvas>
<script>
  var elem = document.getElementById("myCanvas");
  var x = elem.getContext("2d");
  x.moveTo(0,0);
  x.lineTo(200,100);
  x.stroke();
</script>
  

Circle shape canvas

Not supported

<style>
  canvas{
    border: 2px solid orange;
  }
</style>
<canvas id="myCanvas" width="200" height="100">Not supported</canvas>
<script>
  var c = document.getElementById("MyCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
</script>
  

Some uses of canvas

For Rectangles

Canvas is used to draw rectangles.

For Paths

Canvas is used to make different shapes of path.

For Lines

Canvas is used to make different style's of lines.

For Bezier

Canvas is used to make different bezier curves

For Quadratic

Canvas is used to make different quadratic curves

For Images

Canvas is used to give different styles to image.

For Gradients

Canvas is used to make gradients.

For Styles and Colors

Canvas is used in styling and colors.

For Text and Fonts

Canvas is used to give different styles to Text and fonts.

For Pattern and Shadow

Canvas is used for making different styles of pattern and shadow.

For Rotation

Canvas is used in rotating.

For Scaling

Canvas is used for scaling.

For Transform

Canvas is used in transform.










The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


ads