Press "Enter" to skip to content

HTML5-Canvas Examples

Last updated on October 4, 2019

Definition :

    Canvas is a container which is meant for loading the content dynamically on the web page.

Program 1 :

<html>

     <body>

                     <canvas id=”mycanvas” width=”200″ height=”100″ style=”border:1px solid#d3d3d3;”>

                                 your browser does not support the HTML5 canvas tag. </canvas>

                                <script>

                                     var c=document.getElementById(“mycanvas”);

                                                 var ctx=c.getContext(“2d”);

                                                 ctx.moveTo(0,0);

                                                 ctx.lineTo(100,200);

                                                 ctx.stroke();

                                </script>

                </body>

</html>

Program 2 :

<html>

     <body>

                     <canvas id=”mycanvas” width=”200″ height=”100″ style=”border:1px solid#d3d3d3;”>

                                 your browser does not support the HTML5 canvas tag. </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>

                </body>

</html>

Program 3 :

<html>

     <body>

                     <canvas id=”mycanvas” width=”350″ height=”100″ style=”border:1px solid#d3d3d3;”>

                                 your browser does not support the HTML5 canvas tag. </canvas>

                                <script>

                                     var c=document.getElementById(“mycanvas”);

                                                 var ctx=c.getContext(“2d”);

                                                 ctx.font=”60px Arial”;

                                                 ctx.fillText(“Hello World”,10,50);

                                </script>

                </body>

</html>

Program 4 :

<html>

     <body>

                     <canvas id=”mycanvas” width=”350″ height=”100″ style=”border:1px solid#d3d3d3;”>

                                 your browser does not support the HTML5 canvas tag. </canvas>

                                <script>

                                     var c=document.getElementById(“mycanvas”);

                                                 var ctx=c.getContext(“2d”);

                                                 var grd=ctx.createLinearGradient(0,0,200,0);

                                                 grd.addColorStop(0,”red”);

                                                 grd.addColorStop(1,”white”);

                                                 ctx.fillStyle=grd;

                                                 ctx.fillRect(10,10,50,80);

                                </script>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *