Drawing picture in canvas

What is Canvas?

It is possible to draw picture using canvas element. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Insert the code below into body tag of your page.

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">

Update your browser

</canvas>

<script type="text/javascript">

var ca=document.getElementById("myCanvas");

var ct=ca.getContext("2d");

ct.fillStyle="#FF00FF";

ct.fillRect(0,0,150,100);

</script>

If it works fine in your browser then one rectangular window will come within canvas window .

·         Canvas element create a canvas in browser’s window.

·         Java script is used to draw something in canvas.

·         You can use  ct.arc(70,18,15,0,Math.PI*2,true); to generate a circle in canvas window.