Canvas


Canvas

HTML can interact with a bitmapped surface thanks to the HTML canvas element. It's used to create graphics for a website.

The < canvas> element can be used to create graphics on a webpage with the help of javascript. This element is a container for drawing graphics. Javascript is required to actually draw the elements. The element has many methods to draw lines, boxes, circles, images, etc.

A canvas can be defined as a rectangular region on a webpage. It has no border and no content by default.

2D forms and bitmap images can be rendered dynamically and scriptable using the < canvas> element. It's a procedural model with no built-in scene that changes a bitmap at a low level. In canvas, you may draw paths, boxes, circles, text, and images using various methods.

  • Drawing a line

    To draw a straight line on the canvas, we can use the methods: moveTo(x,y) : Defines the start of the line lineTo(x,y) : Defines the end of the line stroke() : Used to draw the line

  • Drawing a circle

    arc(x,y,r,start,stop) : can be used to draw the circle

  • Drawing a text

    Font property: used to declare the font for the text which will be displayed fillText(text,x,y): used to draw filled text, the font is in bold.

  • Drawing a stroke text

    strokeText(text,x,y) : used to draw text which is unfilled

  • Drawing a linear gradient

    fillRect(0,0,x,y) : used to draw a rectangle which starts at 0,0 and draws x * y rectangle.

Example No.1:

<html> <body> <h1>Knowledge2life</h1> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> </body> </html>

OUTPUT:

Knowledge2life

Example No.2:

<html> <body> <h1>Knowledge2life</h1> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> </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>

OUTPUT:

Knowledge2life