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.
<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.