var ctx = document.querySelector('#c').getContext('2d'); var kitty = new Image(); kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif'; kitty.onload = function(){ ctx.drawImage(this, 0,0,this.width, this.height); ctx.font = '68px KulminoituvaRegular'; ctx.fillStyle = 'orangered'; ctx.textBaseline = 'top'; ctx.fillText ('Keyboard Cat', 0, 270); };
<canvas id=c width=500 height=500></canvas>
@font-face { font-family: 'KulminoituvaRegular'; src: url('http://www.miketaylr.com/f/kulminoituva.ttf'); }