How to circumvent the infamous "unterminated string literal" problem

Question

Hi,

I attempted to load a simple HTML file into a canvas (browser = ff 3.66).

var canvas= document.getElementById('oneElement');
var ctx= canvas.getContext('2d');

var img= new Image();
ctx.drawImage(img, 0, 0, img.width, img.height);
img.src = 'data:text/html,<table><tr><td>data 1<td>data 2</td></tr>
<tr><td>data 3><td>data 4</td></tr>
<tr><td>data 5><td>data 6</td></tr>
</table>
'; 

How? Thanks.

Answer 1

It seems you have newlines inside your Javascript string -- which is not allowed.

You should remove those newlines, putting the string in only one line :

img.src = 'data:text/html,<table><tr><td>data1<td>data2</td></tr><tr><td>data 3><td>data 4</td></tr><tr><td>data 5><td>data 6</td></tr></table>'; 

Or, if you want to keep your code readable, a solution could be to use several small strings, and to use strings-concatenation :

img.src = 'data:text/html,<table><tr><td>data 1<td>data 2</td></tr>' +
'<tr><td>data 3><td>data 4</td></tr>' +
'<tr><td>data 5><td>data 6</td></tr>' +
'</table>'; 

Answer 2

Adding a '\' character at the end of each line before the line with the closing single quote should work.

img.src = 'here \
is an \
example';