• In HTML the <canvas> tag is used to draw graphics on a web page using JavaScript.
  • It can be used to draw boxes, gradients, texts, paths and adding images.
  • By default, it does not contain texts and borders.
  • It allows for scriptable and dynamic rendering of 2D shapes and bitmap images.
  • It does not have a built-in scene and becomes a low level, procedural model that updates a bitmap.
  • There are several methods using <canvas> tag.

For example,

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="250" 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.font = "30px Arial";
ctx.fillText("Welcome to Wikitechy",10,50);
</script>

</body>
</html>

Output

Categorized in:

Web Designing

Tagged in:

, , , , , , , , , , , , ,