CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
user1184100
user1184100

Reputation: 6894

Issues with changing font in html5 canvas

I have a small piece of code with 2 canvas and text inside them. But i'm unable to change the font size of a specified canvas.

if(i==1) {
       c.getContext('2d').font = "35pt bold arial";   
}

In the below code i'm trying to change font for second canvas but it is not getting applied.

JSFiddle - http://jsfiddle.net/9n6wD/

var myCanvas = document.createElement('canvas');
myCanvas.width=400;
myCanvas.height=200;
document.body.appendChild(myCanvas);
myCanvasCtx = myCanvas.getContext('2d');

var canvas1 = document.createElement('canvas');
canvas1.width = 150;
canvas1.height = 100;
var myCanvas1Ctx = canvas1.getContext('2d');
myCanvas1Ctx.fillStyle = "#000";
myCanvas1Ctx.font = "25pt arial";
myCanvas1Ctx.fillText("Hello",0,25);

var canvas2 = document.createElement('canvas');
canvas2.width = 150;
canvas2.height = 100;
var myCanvas2Ctx = canvas2.getContext('2d');
myCanvas2Ctx.fillStyle = "#000";
myCanvas2Ctx.font = "25pt arial";
myCanvas2Ctx.fillText("World!",0,25);

var arr = [];
arr.push(new Object({canvas : canvas1, xposition : 50}), new Object({canvas : canvas2, xposition : 170}) );

for(var i in arr) {
    var c = arr[i].canvas;
    if(i==1) {
       c.getContext('2d').font = "35pt bold arial";   
    }

     myCanvasCtx.drawImage(c, arr[i].xposition , 15, c.width, c.height); 
}

Upvotes: 2

Views: 5909

Answers (1)

markE
markE

Reputation: 105015

Html canvas paints your text on the canvas using pixels and then forgets about those pixels.

When you do this:

c.getContext('2d').font = "35pt bold arial";

You're not changing the font for previously painted text.

You are changing the font for any new text.

So, to change your "World!" to 35pt font you need to:

  1. Clear the canvas,
  2. Change the font,
  3. Repaint "World!".

Something like this:

// get a reference to the context of your desired canvas
var ctx=c.getContext('2d')

// clear that canvas
ctx.clearRect(0,0,c.width,c.height);

// reset the font 
ctx.font = "35pt bold arial";

// repaint the text
ctx.fillText("World!",0,25);

As an alternate to your code design

You could temporarily changing the font on your on-screen context instead of using off-screen canvases to create each word:

// draw text @x,y using a specified font

fillTextWidthFont(0,25,"35pt bold arial","World!");

// the function to draw text with a specified font

function fillTextWithFont(x,y,font,text){

    // save the context state (including the beginning font)
    myCanvasCtx.save();

    // change the context font to your desired font
    myCanvasCtx.font=font;

    // draw your text
    myCanvasCtx.fillText(text,x,y);

    // restore the context state (also restoring the beginning font)
    myCanvasCtx.restore();

}

If you need each word to be in a different font, you could create an array of objects that define each word: myWords.push( [x:,y:,font:,text:] ). Then feed each word object into a function like above.

That way you wouldn't need to create an expensive html canvas for each word.

Upvotes: 4

Related Questions