JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="256" height="256">

JavaScript

var canvas = document.getElementById("canvas");
var d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

(canvas.toBlobHD || canvas.toBlob).call(canvas, function (b) {
    var r = new FileReader();
    r.onloadend = function () {
        var p = document.createElement("pre");
        p.style.font = "monospace";
        p.textContent = Array.map(new Uint8Array(r.result), function (e) {
            return e.toString(16);
        }).join("");
        document.body.appendChild(p);
    };
    r.readAsArrayBuffer(b);
    var a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = "test.ico";
    a.href = window.URL.createObjectURL(b);
}, "image/vnd.microsoft.icon", "-moz-parse-options:format=bmp;bpp=32");