LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Canvas


What is HTML Canvas?

The HTML<canvas>element is used to draw graphics, on the fly, via JavaScript.

The<canvas>element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

The numbers in the table specify the first browser version that fully supports the<canvas>element.

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • YES
  • YES
  • YES

Version

  • 2.0
  • 4.0
  • 9.0
  • 3.1
  • 9.0

Understanding Canvas Coordinates

The canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are (0, 0) which is known as origin and the coordinates in the bottom-right corner are (canvas width, canvas height) as demonstrated below.


Draw Line

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Drawing a Line on Canvas</title>
        <style type="text/css">
            canvas{
                border: 1px solid #000;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                context.moveTo(50, 150);
                context.lineTo(250, 50);context.stroke();
            };
        </script>

</head>

<body> <canvas id="myCanvas" width="300" height="200"></canvas> </body> </html>

Output

draw line on canvas


Draw Arc

<!DOCTYPE html>
 
<html lang="en">
	 
	<head>
		<meta charset="UTF-8">
		<title>Drawing a Line on Canvas</title>
		<style type="text/css">
			canvas{border: 1px solid #000;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
			    var canvas = document.getElementById("myCanvas");
			    var context = canvas.getContext("2d");
			    context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
			    context.stroke();
			};
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="200"></canvas>
	</body>
</html>

Output

draw arc on canvas


Draw Rectangle

Draw Arc

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Drawing a Line on Canvas</title>
		<style type="text/css">
			canvas{border: 1px solid #000;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
			    var canvas = document.getElementById("myCanvas");
			    var context = canvas.getContext("2d");
			    context.rect(50, 50, 200, 100);
			    context.stroke();
			};
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="200"></canvas>
	</body>
</html>

Output

draw rectangle on canvas


Draw Circle

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Drawing a Line on Canvas</title>
		<style type="text/css">
			canvas{border: 1px solid #000;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
			    var canvas = document.getElementById("myCanvas");
			    var context = canvas.getContext("2d");
			    context.arc(150, 100, 70, 0, 2 * Math.PI, false);
			    context.stroke();
			};
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="200"></canvas>
	</body>
</html>

Output

draw circle on canvas


Applying Styles and Colors on Stroke

The default color of the stroke is black and its thickness is one pixel. But, you can set the color and width of the stoke using thestrokeStyleandlineWidthproperty respectivley.

<script>
	    window.onload = function(){
	        var canvas = document.getElementById("myCanvas");  
	        var context = canvas.getContext("2d");
	        context.lineWidth = 5;        
	        context.strokeStyle = "orange";        
	        context.moveTo(50, 150);context.lineTo(250, 50);
	        context.stroke();     
	  };
</script>

Output

canvas draw and color canvas


Filling Colors inside Canvas Shapes

You can also fill color inside the canvas shapes using thefillStyle()method. The following example will shows you how to fill a solid color inside a rectangle.

<script>
	window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.rect(50, 50, 200, 100);
        context.fillStyle = "#FB8B89";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    };
</script>

Output

canvas draw and color canvas


Draw Text

You can also draw text onto canvas. These texts can contain any Unicode characters. The following example will draw a simple greeting message "Hello World!" onto a canvas.

<script>
	window.onload = function(){
	    var canvas = document.getElementById("myCanvas");
	    var context = canvas.getContext("2d");
	    context.font = "bold 32px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "orange";
        context.fillText("Hello World!", 150, 100);
        context.stroke();
    };
</script>

Output

draw text on canvas



x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine