HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience.
Canvas is a rectangle area with by default 300px width and 150px height. We can change this according to our requirement. This is the way to include a canvas element to the web page.
<canvas width="250" height="150"></canvas>
<canvas id="cnvs" width="250" height="150" style="border:1px solid #000000;"> </canvas> <script> var canvas = document.getElementById('cnvs'); var ctx = canvas.getContext("2d"); ctx.fillStyle = 'yellow'; ctx.fillRect(20, 20, 100, 100); </script>
Output of the above code
In the above example, getContext is a method that returns an object for working on canvas. fillStyle is a property of canvas and used to fill color gradient in the drawing and fillRect method is used to draw a filled rectangle.