1

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);

Gaurav kumar
  • 29
  • 4
  • This may help http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time – Jim Blackler Feb 19 '12 at 12:13

0 Answers0