html5 canvas write mutiple font in same line

I can be able to fill in canvas this:

This is an example of what I want to do

This is an example of what I want to do

So i received my string in html code, but i parse all the string, and i replace de <strong> for #b# and all </br> for \n in my servidor.

so i have in my javascript this:

c.font = font_size + ' ' + font_family;
          c.fillStyle = color;
          c.textAlign = 'start';
          c.textBaseline = 'top';
          if (this.text_width == 0){  
                  this.text_width = 1024;
          }else{
            this.text_width = this.text_width;
          }
          var DEBUG = true;

          var draw = x !== null && y !== null;

          if (font_size =="8pt" || font_size =="10pt"){
            var lineHeight = 15;
          }

          if (font_size =="11pt" || font_size =="12pt"){
            var lineHeight = 17;
          }
          if (font_size =="14pt" || font_size =="16pt"){
            var lineHeight = 19;
          }
          if (font_size =="18pt" || font_size =="20pt"){
            var lineHeight = 23;
          }
          if (font_size =="22pt" || font_size =="24pt"){
            var lineHeight = 29;
          }
          if (font_size =="26pt" || font_size =="28pt"){
            var lineHeight = 34;
          }
          if (font_size =="30pt" || font_size =="32pt"){
            var lineHeight = 38;
          }
          if (font_size =="34pt"|| font_size =="36pt"){
            var lineHeight = 41;
          }
          if (font_size =="38pt" || font_size =="40pt"){
            var lineHeight = 45;
          }
          if (font_size =="42pt" || font_size =="44pt"){
            var lineHeight = 50;
          }

          fitWidth = this.text_width;
          text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n");
          sections = text.split("\n");

          var i, str, wordWidth, words, currentLine = 0,
              maxHeight = 0,
              maxWidth = 0;

          var printNextLine = function (str) {
            if (typeof String.prototype.startsWith != 'function') {
              // see below for better implementation!
              String.prototype.startsWith = function (str){
                return this.indexOf(str) == 0;
              };
            }
                  if (draw) {
                  comp=0;
                  comp2=0;
                  if (str.startsWith("#b#")){
                  bold=str.split("#b#");

                  //alert(bold);
                  //alert(bold);
                  for(i=0;i<bold.length;i++){
                  if(i%2!=0){
                  c.font = "Bold "+font_size + ' ' + font_family;
                  if(i==0){
                  c.fillText(bold[i], x, y + (lineHeight * currentLine));
                  }else{
                  for(var a=0;a<i;a++){
                  comp+=c.measureText(bold[a]).width
                  }

                  c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
                  }


                  }else{
                  c.font = font_size + ' ' + font_family;
                  for(var b=0;b<i;b++){
                  comp2+=c.measureText(bold[b]).width
                  }
                  c.fillText(" "+bold[i], x+comp2, y + (lineHeight * currentLine));
                  }
                  }
                  }else{
                  if (str.indexOf("#b#") != -1){
                  bold=str.split("#b#");
                  for(i=0;i<bold.length;i++){
                  if(i%2==0){

                  if(i==0){
                  c.font = font_size + ' ' + font_family;
                  c.fillText(bold[i], x, y + (lineHeight * currentLine));
                  }else{
                  for(var a=0;a<i;a++){
                  comp+=c.measureText(bold[a]).width
                  }
                  c.font = font_size + ' ' + font_family;
                  c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
                  }


                  }else{
                  c.font = "Bold "+font_size + ' ' + font_family;
                  for(var b=0;b<i;b++){
                  comp2+=c.measureText(bold[b]).width
                  }
                  c.fillText(" "+bold[i], x+comp2, y + (lineHeight * currentLine));
                  }
                  }



                  }else{
                  c.font = font_size + ' ' + font_family;
                  c.fillText(str, x, y + (lineHeight * currentLine));
                  }

                  }
                  }

                  currentLine++;
                  wordWidth = c.measureText(str).width;
                  if (wordWidth > maxWidth) {
                      maxWidth = wordWidth;

                  }
              };

          for (i = 0; i < sections.length; i++) {
              words = sections[i].split(' ');
              index = 1;

              while (words.length > 0 && index <= words.length) {

                  str = words.slice(0, index).join(' ');
                  wordWidth = c.measureText(str).width;

                  if (wordWidth > fitWidth) {
                      if (index === 1) {
                          // Falls to this case if the first word in words[] is bigger than fitWidth
                          // so we print this word on its own line; index = 2 because slice is
                          str = words.slice(0, 1).join(' ');
                          words = words.splice(1);
                      } else {
                          str = words.slice(0, index - 1).join(' ');
                          words = words.splice(index - 1);
                      }

                      printNextLine(str);

                      index = 1;
                  } else {
                      index++;
                  }
              }

              // The left over words on the last line
              if (index > 0) {
                  printNextLine(words.join(' '));
              }


          }

          maxHeight = lineHeight * (currentLine);

          if (DEBUG) {
              if(maxWidth < this.text_width){
              maxWidth =this.text_width;
              }  
              c.strokeRect(x, y, maxWidth, maxHeight); 
          }

          if (!draw) {
              return {
                  height: maxHeight,
                  width: maxWidth
              };
          }

but if my string have two lines, and the first line begin with bold, the second line don't apeear in the canvas..

Answers


i rewrite the method PrintNextLine, and it works fine.

 var printNextLine = function (str) {
          if (typeof String.prototype.startsWith != 'function') {
              // see below for better implementation!
              String.prototype.startsWith = function (str){
                return this.indexOf(str) == 0;
              };
            }
          if (draw) {
              var comp=0;
              var comp2=0;
              var comp_2=0;
              var comp2_2=0;
              if (str.startsWith("#b#")){
                  bold=str.split("#b#");
                  for(var i=0;i<bold.length;i++){
                      if(i%2!=0){
                          for(var a=0;a<i;a++){
                              comp+=c.measureText(bold[a]).width
                          }
                          c.font = "Bold "+font_size + ' ' + font_family;
                          c.fillText(bold[i], x+comp, y + (lineHeight * currentLine));
                          comp=0;
                      }else{
                          for(var b=0;b<i;b++){
                              comp2+=c.measureText(bold[b]).width
                          }
                          c.font = font_size + ' ' + font_family;
                          c.fillText(bold[i], x+comp2, y + (lineHeight * currentLine));
                          comp2=0;
                      }
                  }  

              }else{
                  if (str.indexOf("#b#") != -1){
                      bold_2=str.split("#b#");
                      for(var i=0;i<bold_2.length;i++){
                          if(i%2==0){
                              for(var a=0;a<i;a++){
                                  comp_2+=c.measureText(bold_2[a]).width
                              }
                              c.font = font_size + ' ' + font_family;
                              c.fillText(bold_2[i], x+comp_2, y + (lineHeight * currentLine));
                              comp_2=0;
                          }else{
                              for(var b=0;b<i;b++){
                                  comp2_2+=c.measureText(bold_2[b]).width
                              }
                              c.font = "Bold "+font_size + ' ' + font_family;
                              c.fillText(bold_2[i], x+comp2_2, y + (lineHeight * currentLine));
                              comp2_2=0;
                          }
                      }
                  }else{
                      c.font = font_size + ' ' + font_family;
                      c.fillText(str, x, y + (lineHeight * currentLine));
                  }

              }


          }

            currentLine++;
            wordWidth = c.measureText(str).width;
            if (wordWidth > maxWidth) {
                maxWidth = wordWidth;

                  }
                    };

Need Your Help

Making a ListBox item go onto the next line

c# winforms listbox

Hello i currently have a list box, which when it reach the end of the list box it carries on writing rather then over flowing on to the next line, how do i get it to overflow onto the next line? or...

Can System.Net.Mail.Mailmessage be inherited?

c# asp.net email

I tried to inherit from mailmessage class, but I can't.