Embed font in Canvas Context using html5 for Android , PhoneGap, iOS

We are developing our apps HTML5/CSS/JavaSript. These apps would be embedded in a native shell/container application for Android and iOS. (We will use PhoneGap to deploy Android and iOS app). We need to embed dynamic or run time font in HTML->canvas->context. (context filltext(....) does not support dynamic text) How we can embed dynamic font in context.

<style> @font-face { font-family: gurblipi; src: url('gurblipi.ttf') format('truetype');} p { font-family: gurblipi, serif; } h1 { font-family: gurblipi, serif; } canvas { font-family: gurblipi, serif; }

</style>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.fillStyle = "#a34567";

开发者_开发技巧 ctx.beginPath();

ctx.fillRect (10,10,280,280);

// The gurblipi is in the same folder , we need to embed it ctx.font = '32px "gurblipi"';

ctx.fillStyle = "rgba(0, 0, 0, 0.7)";

ctx.fillText("Text Test here...", 80, 225);