www.webdeveloper.com
Results 1 to 3 of 3

Thread: Canvas wrapText function

  1. #1
    Join Date
    Apr 2014
    Posts
    2

    Canvas wrapText function

    Hi,

    I am creating a multiple choice quiz, however, the questions are too many characters and won't display on 1 line. I understand I have to use the wrapText function, I am just unsure how to implement this within my code. My questions are set as a variable (Questions) and the different answers stored as a variable being (Options)

    Code:
    				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);
    I understand I have to use the following wrapText function, I just want to know can I use it with my variables and so on, and if the context.fillText can be used in conjunction with the wrap text function.

    Code:
    function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
      var words = text.split(' ');
      var line = '';
      var lineHeight=fontSize;
    
      context.font=fontSize+" "+fontFace;
    
      for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if(testWidth > maxWidth) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
    }
    Any help is greatly appreciated! Thanks!

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    You do not say how textpos1, textpos2... are defined. I suppose the questions are displayed on different successive lines (with n new Lines) from textpos which is the argument of the function SetQuestions or a defined global variable.

    Then you have only to define a global variable currentLine, to store the next line to use for the following questions. Add a last line curentLine=y+(n+1)*lineHeight; to the wapText function and use this value for the following textpos positions with something like this :

    Code:
    var curreentLine;// Defined in wrapText function
    
    SetQuestions = function(textpos){
       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"; 		
       wrapText(Question,20,textpos,"16pt","sans-serif,Arial" );
       wrapText(context,Option1,20,textpos+currentLine,"14pt","sans-serif,Arial
       wrapText(Option2,20,textpos+currentLine,"14pt","sans-serif,Arial");
       wrapText(Option3,20,textpos+currentLine,"14pt","sans-serif,Arial");
    NB : In fact one unique global variable (to define before the call to SetQuestions) is necessary.
    Last edited by 007Julien; 04-14-2014 at 04:11 PM.

  3. #3
    Join Date
    Apr 2014
    Posts
    2
    Hi, Apologies for the late reply I have been away on holiday.

    Thanks for the above, textpos1 is the starting coordinates for the Question, with textpos2 - textpos4 being the coordinates for the answer to be displayed. I have created a background image so these coordinates are important so the answers are displayed neatly.

    My answers will not require the wrap text as they are short enough for one line, however it is only the Question which will need to be spread over two lines. I hope this makes a bit more sense as I am still unable to get the text over two lines.

    Again, any help, greatly appreciated!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles