HTML CANVAS TUTORIAL

Share the post

Hello All, Today we will discuss canvas in HTML. In this topic, We will cover what is HTML canvas?   This HTML CANVAS TUTORIAL will help you to understand How to use canvas in HTML with an example ?. Most of the game developers are already known about the HTML canvas. As, most of the gaming industry using a concept like graphics drawing which is purely based on canvas. So, let’s start.

What is HTML Canvas? 

HTML Canvas is commonly used to do R & D for graphics drawing. this tag is used for canvas. This drawing is drawn by using JavaScript. We can specifically assign width & height for canvas.

HTML Canvas Example : 

1. Add a text inside a canvas as follows :

HTML & JAVASCRIPT

<html>


<head>
    <h1>HTML : canvas example</h1>
    <style>


    </style>
</head>


<body>


    <canvas id="canvasArea" width="500px" height="500px"></canvas>


</body>


</html>


<script>
var x = document.getElementById("canvasArea");
console.log(x);
var context = x.getContext("2d");
console.log(context);
context.font = "50px sans-serif";
context.fillText("line draw example",1,75);
</script>

OUTPUT

output
Output

2. Draw a line by using HTML canvas. Please see the below example.

HTML & JAVASCRIPT

<html>


<head>
    <h1>HTML : canvas example</h1>
    <style>


    </style>
</head>


<body>


    <canvas id="canvasArea" width="500px" height="500px"></canvas>


</body>


</html>


<script>
var x = document.getElementById("canvasArea");
console.log(x);
var context = x.getContext("2d");
console.log(context);
context.moveTo(0,0);
context.lineTo(500,500);
context.stroke();
</script>

OUTPUT

output
Output

So, as shown in the above example we can able to add a text or line or circle inside HTML by using CANVAS.

Leave a Comment