DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <canvas> Canvas Tag

The ** Canvas tag** is used to draw graphics on the HTML web page. You can use multiple canvas tag on one HTML page. It allows users to create an imaginary input such as objects , images , signature , animations , etc.

The canvas tag is only a container for graphics. You should use JavaScript to draw the graphics. By default, the canvas element has no border and no content. It is one of the new sectioning elements in HTML 5 so earlier browsers do not support this element.

A canvas context is an object with its properties and methods for rendering. The canvas element can have only one context. The context maybe 2D or 3D. The exact size of an canvas element depends on the browser. You can change it by using the CSS property.

Estimated reading time: 3 minutes

Syntax:

It contains both an opening canvas tag and closing canvas tag. The content is written between these two tags.


<canvas width="150" height= "150"></canvas>

Enter fullscreen mode Exit fullscreen mode

Sample for HTML canvas Tag:

Here is an example code for creating a basic, empty canvas:


<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head> 
  <body>
<h2>Sample Canvas</h2>
    <canvas id="sample" width="150" height="150" style="border:2px solid;"> 
Your browser doesn’t support the HTML5 canvas element.</canvas>
     </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

HTML canvas Tag with JavaScript:

Let’s see the following examples to draw graphics on HTML page using the canvas tag with JavaScript.

Sample of canvas tag to draw a Rectangle on the Fly:


<canvas id="SampleCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var canvas = document.getElementById("SampleCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#C40655";
ctx.fillRect(0, 0, 300, 150);
</script>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Sample of canvas tag to draw a Line:

To draw a straight line on the canvas, use the following two steps:

  • moveTo (x, y) – It specifies the starting point of the line.
  • lineTo (x, y) – It specifies the ending point of the line

<!DOCTYPE html>
<html>
<body>
<h2>Draw a line</h2>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Attributes:

The canvas tag supports the global attributes and the event attributes.

th, td{ padding: 20px; }

Attributes Value Description
height pixels This attribute helps to define the element height in pixels.
width pixels It specifies the element width in pixels.

Browser Support:

Browser Support

Related Articles:

The post HTML Canvas Tag appeared first on Share Point Anchor.

Top comments (0)