The <canvas> element in HTML is utilized to dynamically draw graphics using JavaScript.
It acts as a container for graphics, requiring JavaScript to execute the actual drawing.
Canvas offers numerous methods for drawing paths, shapes, text, and incorporating images.
This feature is universally supported by all major web browsers.
Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
For example:
<canvas id="myCanvas" width="360" height="180"></canvas>Note: Always include an id attribute (for scripting), and width and height attributes to set the canvas size. To add a border, use the style attribute.
For example:
<canvas id="myCanvas" width="360" height="180" style="border:1px solid grey;"></canvas>
JavaScript Usage
Once you've created the rectangular canvas area, you'll need to add JavaScript to handle the drawing operations.
For example:
<script>
var canv = document.getElementById("myCanvas");
var cntxt = canv.getContext("2d");
cntxt.moveTo(0, 0);
cntxt.lineTo(370, 185);
cntxt.stroke();
</script>The above code will draw a line as shown below.
The below code will draw a text as shown below.
<script>
var canv = document.getElementById("myCanvas");
var cntxt = canv.getContext("2d");
cntxt.font = "25px Verdana";
cntxt.fillText("This is a Canvas", 15, 40);
</script>
The below code will create a linear gradient as shown below.
<script>
var canv = document.getElementById("myCanvas");
var cntxt = canv.getContext("2d");
var grd = cntxt.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
cntxt.fillStyle = grd;
cntxt.fillRect(15, 15, 300, 150);
</script>
The below code will draw an image in the canvas, when the draw button is clicked, as shown below.
<body>
<img id="image" src="lion.jpg" alt="lion">
<canvas id="myCanvas" width="210" height="230"
style="border:1px solid #d3d3d3;"></canvas>
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var canv = document.getElementById("myCanvas");
var cntxt = canv.getContext("2d");
var img = document.getElementById("image");
cntxt.drawImage(img, 5, 5);
}
</script>
</body> 
You will learn more about HTML Canvas element in our HTML Canvas Guide.
HTML SVG Element
SVG, or Scalable Vector Graphics, defines vector-based graphics using XML, allowing them to be seamlessly embedded in HTML pages.
Every element and attribute in SVG files is animatable.
SVG is a W3C recommendation and it seamlessly integrates with other standards like CSS, DOM, XSL, and JavaScript.
The <svg> element in HTML serves as a container for SVG graphics.
SVG offers various methods for drawing shapes like paths, rectangles, circles, polygons, text.
SVG Examples
The below code will create a circle as shown below.
<svg width="120" height="120">
<circle cx="60" cy="60" r="50" stroke="blue" stroke-width="2" fill="blue" />
</svg>
The below code will create a rectangle as shown below.
<svg width="360" height="120">
<rect x="15" y="15" width="200" height="100" stroke="red" stroke-width="4" fill="blue" />
</svg>
The below code will create a rectangular shape as shown below.
<svg width="360" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
The below code will create a polygon (star) as shown below.
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#ff4c2d;stroke:#072c4b;stroke-width:5;fill-rule:evenodd;" />
</svg>
Difference Between SVG and Canvas
SVG is a language for defining 2D graphics in XML, while Canvas is used for drawing 2D graphics in real-time using JavaScript.
SVG being XML-based, every element is accessible within the SVG DOM, allowing for JavaScript event handlers to be attached to SVG graphics.
Each shape drawn in SVG is treated as an object. If attributes of an SVG object are altered, the browser can automatically update and re-render the shape.
On the other hand, Canvas renders graphics pixel by pixel. Once a graphic is drawn in Canvas, it is not retained by the browser. Changing its position requires redrawing the entire scene, including any covered objects.
SVG is resolution independent, while canvas is resolution dependent.
SVG has support for event handlers, while canvas has no support for event handlers.
SVG has good text rendering capabilities, while canvas has poor text rendering capabilities.
SVG has slow rendering if complex, while canvas has faster rendering.
SVG is not not suited for game applications, while canvas works well for game applications.
Please check below options for the links to our previous or next tutorial.