How to make graphics with a script in HTML?

HTML Web Development Front End Technology

To make graphics with a script, use the <canvas> tag. The HTML <canvas> tag is for drawing graphics, animations, etc using scripting.

The following are the attributes of the <canvas> tag −

Attribute	Value	Description
height	pixels	Specifies the height of the canvas.
width	pixels	Specifies the width of the canvas.

Example

You can try to run the following code to implement <canvas> tag and create graphics −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Canvas Tag</title>
   </head>
   <body>
      <canvas id = "newCanvas">Your browser does not support canvas tag.</canvas>
      <script>
         var c = document.getElementById('newCanvas');
         var ctx = c.getContext('2d');
         ctx.fillStyle = '#00AEEF';
         ctx.fillRect(0,0,180,50);
      </script>
   </body>
</html>

Ramu Prasad

Published on 14-Mar-2018 05:39:11

Previous Page Print Page