How Do You Add A Bootstrap Icon To An Canvas, Using Javascript? If There Is A Way

Here is what I have tried so far. ctx.setAttribute('class', 'glyphicon glyphicon-time'); but also; var icon = document.createElement('span'); icon.className ='glyphi

Solution 1:

You can make use of the html2canvas.js.

The following code may help you:

HTML

<spanclass="glyphicon glyphicon-align-left"></span><canvasid="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 = newImage;

        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.

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