Crus4

logo

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.

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

Your browser does not support the HTML canvas tag.


Related Posts

HTML class Attribute

HTML id Attribute

Inline and Block Elements

HTML Canvas – crus4

11 thoughts on “HTML Canvas – crus4

Leave a Reply

Your email address will not be published. Required fields are marked *