HTML Canvas
The <canvas> element in HTML is used to draw graphics on a web page by using a scripting language like JavaScript.
In HTML the <canvas> element is just a container for graphics. In order to actually draw the graphics, you must need to use JavaScript. A canvas pretty much looks like a rectangular area on an HTML web page. The <canvas> element looks like a blank container, It has no border and no content.
How to Create an HTML Canvas
In a below example we have created an HTML canvas, by using a canvas element and an id attribute:
Example
<canvas id = "mycanvas" width ="200" height="100"> </canvas>
Output
Here you may wonder after seeing this blank output. This is because the <canvas> element has no border and no content. In order to make the canvas visible let’s add a border by using the style attribute.
Here is an example of a canvas after adding border:
Example
<canvas id = "mycanvas" width ="200" height="100" style="border:2px solid #000000;"> </canvas>
Output
Copy the above code and run it here, to see how it actually works.
Canvas Coordinates
So, we know that how to create a canvas. Now in order to draw on the canvas, we are going to need to use coordinates. In our geometry class we use the cartesian coordinate system. where the X-axis are going from left to right, and Y-axis going from bottom to top. (0,0) are present in the middle and any number below 0 are negative on Y-axis and a number to the left of 0,0 are negative on X-axis. But in Canvas the coordinate system is different. Here 0,0 is in the top left, and our X number gets bigger as we go to the right and our Y number gets bigger as we go down. In a below image you will get an idea how canvas coordinate actually is.
Add JavaScript to HTML Canvas Tag
So you know that how to create a basic rectangular canvas area. Now you must need to use a JavaScript to draw the graphics. Let’s start by drawing a very simple graphic.
Draw a Line
Here is an example of drawing a line using JavaScript:
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:2px 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(200,100);
ctx.stroke();
</script>
</body>
</html>
Output
Draw a Circle
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Output
Draw a Text
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="100" style="border:2px 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("Learn to Code With crus4",10,50);
</script>
</body>
</html>
Output
11 thoughts on “HTML Canvas – crus4”