JavaScript variables - HTML5 canvas issue

Question

In the following code, I change an HTML5 canvas font by passing a string. Then in the second case, I use an array and variables. The first case works. The second case does not change fonts. Problem is probably in the way I construct the variable.

<!DOCTYPE HTML>
<html>

<body>
    <canvas id="myCanvas" width="800" height="600"></canvas> 

<script>
// array of fonts
var fontArray = new Array();    
fontArray.push("Antiqua");            
fontArray.push("Arial");  
fontArray.push("Comic Sans");    

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// This works
context.font  = "25pt Arial";   
context.fillText('This works ', 30, 30);            
context.font  = "25pt Monospace";   
context.fillText('This works ', 30, 80);            


// This works but shows no varaition of font
for(x=0;x<3;x++){
    var fontText = "\'" + "20pt " + fontArray[x] + "\'" ;           
    context.font  = fontText;
    console.log(fontText);   // print to console
    context.fillText('This works but shows no variation of font', 120, 140+(x*50));             
}
</script>

There's no need for the escaped single quotes.

Qantas 94 Heavy
– Qantas 94 Heavy

2013-05-15 02:22:48 +00:00
Commented May 15, 2013 at 2:22 — Qantas 94 Heavy
– Qantas 94 Heavy, Commented May 15, 2013 at 2:22

Dan · Accepted Answer · 2013-05-15 02:22:48Z

1

What if you change:

var fontText = "\'" + "20pt " + fontArray[x] + "\'" ;

to

var fontText = "20pt " + fontArray[x];

answered May 15, 2013 at 2:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alex · Accepted Answer · 2013-05-15 02:22:39Z

0

You shouldn't wrap the font string in single quotes. Remote that and it should work.

var fontText = "20pt " + fontArray[x];

jsFiddle.

Another reason is that the fonts probably are not available on the client.

answered May 15, 2013 at 2:22

alex

492k205 gold badges890 silver badges992 bronze badges

Collectives™ on Stack Overflow

JavaScript variables - HTML5 canvas issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related