Canvas

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

<div class="row">
    <div class="col-3">
        <h3>Canvas</h3>
    </div>
    <div class="col-9">
        
        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML canvas tag.</canvas>
    </div>
</div>
<div class="row">
    <div class="col-3">
        <h3>Canvas</h3>
    </div>
    <div class="col-9">
        
        <canvas id="wordCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
            Your browser does not support the HTML canvas tag.</canvas>
    </div>
</div>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    var word = document.getElementById("wordCanvas");
    var wCtx = word.getContext("2d");
    wCtx.font = "30px Arial";
    wCtx.fillText("Hello World",10,50);
</script>

SVG

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Source code on Github