Question

134

How to draw Font Awesome Icons onto html canvas [Version < 5]

rated 0 times [ 139] [ 5] / answers: 1 / hits: 26070 / 8 Years ago, tue, february 23, 2016, 12:00:00

How can I draw Font Awesome characters (Icons Glyphs) onto html5 canvas? I am using an older version of Font Awesome.

How can I style those drawn characters?

<script>



    var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');

    context.font = '';

    context.fillText();



</script>

language: lang-html

<canvas id=myCanvas class=canvas width=500 height=500 ></canvas>html>



<script>



    var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');

    context.font = '';

    context.fillText();



</script>

language: lang-html

<canvas id=myCanvas class=canvas width=500 height=500 ></canvas>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jocelynkarsynr

Add To Favorites

Follow

Total Points: 472

Total Questions: 98

Total Answers: 96

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

jocelynkarsynr questions

1 file upload using axios in react

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Unable to write data (addRow) into Excel file in Nodejs

Sat, Jul 11, 20, 00:00, 4 Years ago

1 How can I export * as namespace in Babel?

Sun, May 10, 20, 00:00, 4 Years ago

1 React Routing to Same Component with Different URL

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How do I persist user authentication using the Firebase refresh token?

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 8 Years ago josiah · Accepted Answer

Here's how to draw Font Awsome glyphs on html5 canvas:

Link in Font Awesome:

<link rel=stylesheet 

    href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>

Set the context font to Font Awesome:

// set the canvas context's font-size and font-face

context.font='14px FontAwesome';

Draw one of the Font Awesome characters on the canvas:

// specify the desired character code with the Unicode prefix (u) 

context.fillText('uF047',20,50);

Here's example code and a Demo:

var canvas=document.getElementById(canvas);

var ctx=canvas.getContext(2d);



ctx.font='12px verdana';

ctx.fillText('Please wait for Font Awesome to load...',20,30);



// give font awesome time to load

setTimeout(start,2000);



function start(){

  ctx.clearRect(0,0,canvas.width,canvas.height);

  ctx.font='30px FontAwesome';

  ctx.fillText('uF047',20,50);

}

body{ background-color: ivory; }

#canvas{border:1px solid red; margin:0 auto; }

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>

<script src=https://code.jquery.com/jquery-2.1.1.min.js></script>

<h4>Font Awesome glyph drawn onto html5 canvas</h4>

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

[Addition: another way to load FontAwesome]

And as @Kaiido comments, you can cause the browser to start loading FontAwesome by setting the font-family:fontawesome on the canvas element (or another element).

The demo shows how to load custom fonts (including FontAwesome) on-the-fly.

[Addition: A FontAwesome onload function]

Like img's, fonts load asynchronously so you must wait for them to fully load before trying to draw with them on canvas. But unlike imgs, fonts don't have a built-in .onload method to tell us when they are fully loaded.

Here's a workaround onload function you can use to trigger a callback when FontAwesome has fully loaded and is ready to fillText on the canvas:

<!doctype html>

<html>

<head>

<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css>

<script src=https://code.jquery.com/jquery-2.1.1.min.js></script>

<style>

    body{ background-color: ivory; }

    #canvas{border:1px solid red; margin:0 auto; }

</style>

<script>

$(function(){



    var canvas=document.getElementById(canvas);

    var ctx=canvas.getContext(2d);

    var cw,ch;



    AwesomeFontOnload(start,3000);



    function start(){

        ctx.font='48px fontawesome';

        ctx.fillText('uF064uF065 uF0a5',20,75);

    }



    function AwesomeFontOnload(callback,failAfterMS){

        var c=document.createElement(canvas);

        var cctx=c.getContext(2d);

        var ccw,cch;

        var fontsize=36;

        var testCharacter='uF047';

        ccw=c.width=fontsize*1.5;

        cch=c.height=fontsize*1.5;

        cctx.font=fontsize+'px fontawesome';

        cctx.textAlign='center';

        cctx.textBaseline='middle';

        var startCount=pixcount();

        var t1=performance.now();

        var failtime=t1+failAfterMS;

        //

        requestAnimationFrame(fontOnload);

        //

        function fontOnload(time){

            var currentCount=pixcount();

            if(time>failtime){

                alert('Font Awsome failed to load after '+failAfterMS+'ms.');

            }else if(currentCount==startCount){

                requestAnimationFrame(fontOnload);

            }else{

                callback();

            }

        }

        //

        function pixcount(){

            cctx.clearRect(0,0,ccw,cch);

            cctx.fillText(testCharacter,ccw/2,cch/2);

            var data=cctx.getImageData(0,0,ccw,cch).data;

            var count=0;

            for(var i=3;i<data.length;i+=4){

                if(data[i]>10){count++;}

            }

            return(count);

        }

    }



}); // end $(function(){});

</script>

</head>

<body>

    <h4>Font Awesome glyphs drawn onto html5 canvas</h4>

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

</body>

</html>