Capturing newline info from a div

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
If this isn't the proper NG for this question, I apologize in advance.

I have an application that creates one or more small contenteditable
divs as a child element of a another div. I am able to type text into
those divs. If the text is longer than the div min-width dimension,
the text is word-wrapped to a new line. Alternatively, I can hit
ctrl-return to manually create the new line.

After entering all the text, I want to place the different texts on a
canvas ("save_canvas"), at the same location as the original text,
which locations are stored in two arrays (x_pos_array and
y_pos_array). I accomplish this with the following javascript code:

cnt = x_pos_array.length;
for (var i = 0; i < cnt; i++) {  //look at all divs
 if (x_pos_array[i] != 0) {   //if there's a non-zero x_pos
   test_div = document.getElementById('mrkr'+i).innerHTML;  //text div
    if(test_div !='') { //if there's text in the div
     x0 = x_pos_array[i];
     y0 = y_pos_array[i];
     save_canvas.fillStyle = 'white';
     save_canvas.font = "12pt 'Arial Narrow'";
     save_canvas.fillText(test_div, x0, y0);

This works well, with one major exception. None of the line breaks,
whether word wrapped or manually forced new line are effected in the
copy. The text flows to the right, out of the canvas.

Is there a method for replicating the text geometry of the original
div on the canvas?

Ed Jay (remove 'M' to respond by email)

Re: Capturing newline info from a div

Hi, this may help.

Site Timeline