JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script id="test-template" type="text/x-handlebars-template">
<h3>Hello {{world}}</h3>
    <img src="{{{generateQRCode col}}}"/>
</script>

<h1>Handlebars: canvas test</h1>

<div id="views"></div>

JavaScript

Handlebars.registerHelper("generateQRCode", function (col) {
        var canvas = window.document.createElement("canvas");
        canvas.width = 128;
        canvas.height = 128;
        canvas.chart = "doughnut";
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = col;
        ctx.fillRect(0, 80, 128, 16);
        ctx.fillRect(16, 0, 32, 32);
        ctx.fillRect(80, 0, 32, 32);
        return canvas.toDataURL();
    });

    var T = Handlebars.compile($("#test-template").html());

    $(function () { //onReady
        var obj = {
            world: "Blue-Green Planet",
            col: "green"
        };
        $('<div class="view" id="test1">').append(T(obj)).appendTo('#views');
    });