javascript - Canvas WrapText function with fillText -

i creating multiple choice quiz, however, questions many characters , won't display on 1 line. understand have use wraptext function in order paragraph it, unsure how implement within code. questions set strings in variable (questions), answers being strings in variable (options). textpos1, defines coordinates want question start, textpos2 - textpos4 defining coordinates separate answers start. these coordinates in these positions align background image.

jsfiddle here full code doesn't seem bg image on there... http://jsfiddle.net/danielparry8/6u9rn/

 var canvas = document.getelementbyid("mycanvas");             var context = canvas.getcontext("2d");             var quizbg = new image();             var question = new string;             var option1 = new string;             var option2 = new string;             var option3 = new string;             var mx=0;                                                var my=0;             var correctanswer = 0;             var qnumber = 0;             var rightanswers=0;             var wronganswers=0;             var quizfinished = false;             var lock = false;             var textpos1=25;             var textpos2=145;             var textpos3=230;             var textpos4=325;             var questions = ["which manchester united player won \n 2008 golden boot 31 goals?","at club did bobby charlton start football career?","which year did wayne rooney win bbc young sports personality of year award?"];             var options = [["cristiano ronaldo","wayne rooney","ryan giggs"],["manchester united","manchester city","chelsea"],["2002","2003","2004"]]; 

the 'setquestions' function grabs appropriate question , answers , uses filltext apply them canvas, issue being question displayed on 1 continuos line.

   setquestions = function(){                  question=questions[qnumber];                 correctanswer=1+math.floor(math.random()*3);                  if(correctanswer==1){option1=options[qnumber][0];option2=options[qnumber][1];option3=options[qnumber][2];}                 if(correctanswer==2){option1=options[qnumber][2];option2=options[qnumber][0];option3=options[qnumber][1];}                 if(correctanswer==3){option1=options[qnumber][1];option2=options[qnumber][2];option3=options[qnumber][0];}                  context.textbaseline = "middle";                 context.font = "16pt sans-serif,arial";                 context.filltext(question,20,textpos1);                 context.font = "14pt sans-serif,arial";                 context.filltext(option1,20,textpos2);                 context.filltext(option2,20,textpos3);                 context.filltext(option3,20,textpos4);              } 

below wraptext function have tried implement design no avail, if can appreciated. thanks!

    function wraptext(context, text, x, y, maxwidth, fontsize, fontface){        var words = text.split(' ');        var questions = '';        var lineheight=fontsize;    context.font=fontsize+" "+fontface;    for(var n = 0; n < words.length; n++) {     var testline = questions + words[n] + ' ';     var metrics = context.measuretext(testline);     var testwidth = metrics.width;     if(testwidth > maxwidth) {       context.filltext(questions, x, y);       questions = words[n] + ' ';       y += lineheight;     }     else {       questions = testline;     }   }   context.filltext(questions, x, y);     return(y); } 

i experimented example code. don't indicate expect passed in 'fontsize' argument 'wraptext' function, assumed '16pt'. have code:

var lineheight=fontsize;  context.font=fontsize+" "+fontface; 

so now...

lineheight === '16pt' context.font === '16 pt sans-serif,arial' 

then later code says:

y+= lineheight; 

now have problem, because adding '16pt' (lineheight) y doesn't make sense. value 'y' is simple integer value (representing pixels). trying add string, '16pt' results in strange value , strange results.

i used code jsfiddle, copied own sandbox. cut/pasted above, code wraptext. substituted for:

context.filltext(question, 20, textpos1);

with:

wraptext(context,question,20,textpos1,500,'16pt','sans-serif,arial');

inside wraptext

y = lineheight; 

instead use:

y = 16; 

you should see wrapped line. y = 16 arbitrary number chose. representing pixels...it isn't same thing 16pt.