SVG and Canvas
What Is It?
SVG describes shapes as elements. Canvas is a drawing surface that JavaScript paints on.
What the Tags Mean
svg: a scalable drawing.circle: a circle in SVG.canvas: a drawing area.getContext("2d"): asks JavaScript for 2D drawing tools.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG and Canvas</title>
</head>
<body>
<svg width="120" height="120" role="img" aria-label="Blue circle">
<circle cx="60" cy="60" r="40" fill="blue" />
</svg>
</body>
</html>Browser preview
What you see: You see a blue circle. cx and cy give the centre position; r gives the radius.
Example 2: Another Use
Use canvas when you want JavaScript to draw shapes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG and Canvas</title>
</head>
<body>
<canvas id="drawing" width="200" height="100">A red rectangle.</canvas>
<script>
const pen = document.getElementById("drawing").getContext("2d");
pen.fillStyle = "red";
pen.fillRect(10, 10, 100, 50);
</script>
</body>
</html>Browser preview
Simple Tip
An SVG circle is an element you can inspect. A canvas drawing is pixels, so provide a useful text description too.
Try It Yourself
Change the circle color and size.