HTML Canvas
HTML
The HTML <canvas> element is used to draw graphics using JavaScript.
HTML <canvas> Tag.
➔ Canvas element is a container for graphics to show on web page.
➔ JavaScript is used to actually draw the image on the canvas.
➔ Canvas create bitmap images for the graphics and can compromise quality when zooming, So it differs form SVG.
➔ Fallback text is used to notify user if canvas is not supported by the browser.
Key Concepts
➔ The canvas tag can dynamically render typically 2d shapes on a webpage with JavaScript.
➔ The canvas tag requires JavaScript to perform graphics operations, without JavaScript the canvas itself cannot perform any drawing.
➔ The canvas has a coordinate system and is defined at (0,0) in the upper left corner and has the maximum value for the coordinate (x,y) in the lower right corner.
➔ A fallback message can be provided by the canvas tag for older and unsupported browsers that cannot handle graphics or where JavaScript is disabled.
General use of canvas tag
➔ Canvas tags are very useful for creating 2D games and where interactive simulations are required.
➔ Canvas can also be used for data visualization by plotting charts and graphs.
➔ Canvas can be used in animation or image manipulation.
General setup of canvas tag
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
Canvas Container
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<h2>HTML Canvas Example</h2>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
Click on the "See output" button to see how it works.
Canvas Draw a Line
Example
<h2>HTML Canvas Line Example</h2>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Click on the "See output" button to see how it works.
Canvas Draw a Circle
Example
<h2>HTML Canvas Circle Example</h2>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Click on the "See output" button to see how it works.
Canvas Draw Linear Gradient
Example
<h2>HTML Canvas Linear Gradient Example</h2>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Click on the "See output" button to see how it works.
Canvas Draw Circular Gradient
Example
<h2>HTML Canvas Circular Gradient Example</h2>
<canvas id="myCanvas5" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
Click on the "See output" button to see how it works.
Canvas Draw Text
Example
<h2>HTML Canvas Draw Text Example</h2>
<canvas id="myCanvas6" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas6");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Click on the "See output" button to see how it works.