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”