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..
i rewrite the method PrintNextLine, and it works fine.