How do you add a bootstrap icon to an canvas, using javascript? If there is a way

Question

Here is what I have tried so far.

     ctx.setAttribute("class", "glyphicon glyphicon-time");

but also;

    var icon = document.createElement("span");

    icon.className ="glyphicon glyphicon-time";
    this.appendChild(icon);

Answer 1

You can make use of the html2canvas.js .

The following code may help you:

HTML

<span class="glyphicon glyphicon-align-left"></span>

<canvas id="canvas" width="300" height="300"></canvas>

JS

html2canvas(document.querySelector('.glyphicon'), {
    onrendered: function(canvas) {
        var myCanvas = document.querySelector('#canvas');
        var ctx = myCanvas.getContext('2d');
        var img = new Image;

        img.onload = function(){
            ctx.drawImage(img,0,0);
        };

        img.src = canvas.toDataURL();

        document.querySelector('.glyphicon').style.display = 'none';
    }
});

Here is the fiddle: http://jsfiddle.net/k7moorthi/qpyj02k8/

Here I have used the html2canvas.js to render the html code to a canvas which will dynamically create and return an in memory canvas element (which you can append to some elements if you want). I don't want to use the dynamically created canvas since it will cause some problems when i want to update the canvas content. So I just get the dataurl of the canvas, converted it as an image object and drawn it to my already existing canvas element.

EDIT:

As @Patrick Evans mentioned, you can directly use fillText() method to render gylphicon into canvas.

HTML

<canvas id="canvas" width="300" height="300"></canvas>

CSS

@font-face {
    font-family: 'glyphicon';
    src: url('glyphicons-halflings-regular.eot'); /* IE9 Compat Modes */
    src: url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('glyphicons-halflings-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('glyphicons-halflings-regular.woff') format('woff'), /* Pretty Modern Browsers */
        url('glyphicons-halflings-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('glyphicons-halflings-regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

JS

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = '20px glyphicon';

ctx.fillText(String.fromCharCode(0x2a), 10, 50);

Here is the updated fiddle: http://jsfiddle.net/k7moorthi/qpyj02k8/3/

To get the char code for a icon use gylphicon cheat sheet . Click the copy dropdown below each icon on the cheat sheet and click on Unicode HTML Entity . Now the unicode value will be copied to your clipboard. It will look something like this * . Replace &# with 0 and remove ; to get the char code.

Answer 2

Can't comment as lack of reputation but to answer your question about why you can't draw anything that has an e in the hex code. It's because you need to use the font

ctx.font = '12px glyphicons halflings';

rather than just glyphicon.