how to put black text on top of gray rect in jspdf

Question

I am using jspdf to convert my html page to PDF. So far I have figured out styles in the HTML don't apply to the PDF document. So I'm using doc.text and doc.rect.

I need the text on top of the rectangle but it seems to be that the rectangle is always on the top and it covers the text. How can I resolve this?

This is what I have tried:

var doc = new jsPDF();    

doc.setFontSize(17);     

doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');

doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')

Answer 1

You can use getTextWidth method to set proper width for a rectangle, but then you have to set font size/type before getting the width.

http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth

Answer 2

In jsPDF must be write code in sequence, then first draw the retangle and last write your text.

var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);

Answer 3

Draw your rectangle before you draw your text

var doc = new jsPDF();

doc.setFontSize(17);

doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');

doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');