A Pen by MattyBalaam.

index.html

<p><i class="fa fa-car"></i> Force Font to load.</p>

<canvas id="thecanvas" width="900" height="700">
  
</ canvas>

script.js

var standardIcon = [["\uf013", 0]];

var stackedIcon = [
  ["\uf1db",0],
  ["\uf040",180, 0.6] // [0] unicode - http://fortawesome.github.io/Font-Awesome/cheatsheet/ ||| [1] rotation angle ||| [2] scale icon.
];
var fontHeight = 70;

$(window).on('load', function(){
  
  var waiting = setTimeout(makeCanvas, 1000);
  
}) 

Math.radians = function(deg) {
 return deg * (Math.PI/180);
}

function placeFont(iconArray, x, y, ctx) {

  jQuery.each(iconArray, function(i, iconCode){
    ctx.save();

    if (iconCode[1] > 0) {

     ctx.translate(x,y-fontHeight*0.55);
     ctx.rotate(Math.radians(iconCode[1]));
     x = 0; 
     y = 0;
    }

    if (iconCode[2] !== "undefined") {
      ctx.scale(iconCode[2], iconCode[2]);    
    }     

    ctx.fillText(iconCode[0], x, y)
    ctx.restore();

  })    

} 

function makeCanvas() {
  
  var canvas = document.getElementById('thecanvas');
 
  if (canvas.getContext){
 
    var ctx = canvas.getContext('2d');
     
    ctx.fillStyle = '#694';
    ctx.textAlign = "center";
    ctx.font  = fontHeight + 'px FontAwesome';
   
    placeFont(standardIcon, 100, 100, ctx);
    placeFont(stackedIcon, 200, 250, ctx);    
    
    
  }
  
}

style.scss

@import "bourbon";
p {
  visibility: hidden;
}

udgpj.markdown

udgpj

A Pen by MattyBalaam on CodePen.

License.