Why is this code not working?

**WarrenW** · Feb 15th, 2013, 12:13 PM

Hello,

I have never coded for the canvas in html5 but got this example from a web page. It works fine. Then I replaced the text with a table in there as shown below but nothing works. Any reason why?

I want to draw a table in the canvas and save it as an image.

Code that works:

Code:

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

Code that does not work:

Code:

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<table border=1 width=190><tr><td width=100>Hi there!</td><td width=90>not bad..</td></tr></table>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

Thanks!!!

**coothead** · Feb 16th, 2013, 08:11 AM

Hi there WarrenW

I found that your first code worked in Firefox and Chrome, but not in Opera, Safari or IE.

The second code will work in those two browsers, if you single quote the values, as shown...

Code:


"<table border='1'><tr><td width='100'>Hi there!</td><td width='90'>not bad..</td></tr></table>" +

Note:-
I also reduced the font-size to 30px.

**WarrenW** · Feb 16th, 2013, 10:10 AM

Thanks for the reply. I just changed that one line of code with what you have here with the single quotes and it still did not work in IE9. It prompts to run the script and I say yes. Did you mean it will run in firefox with the single quotes? Because it does.

What I am trying to do is create an image of an html table. I know I could draw the table in a canvas and save it but if I could use html it would be so much easier. But if it will not work in IE then that is an issue. I am going to have the table generated by code saving the html file and executing it inside a vb.net app. No one ever sees it in the browser, it is run this way to generate the table and save it to file. So I guess it will use whatever the default web browser is on the machine? It will be done using the webbrowser control in vb so maybe that means IE anyways.

Thanks for your help!!

Warren

**coothead** · Feb 16th, 2013, 02:54 PM

Hi there WarrenW,

Perhaps I did not make myself clear in my previous post.

Only Firefox and Chrome render the code examples.

**WarrenW** · Feb 16th, 2013, 03:09 PM

That's what I thought after I read it again.

Thanks for helping!!

Warren

Thread: Why is this code not working?

Thread Tools

Display

Why is this code not working?

Re: Why is this code not working?

Re: Why is this code not working?

Re: Why is this code not working?

Re: Why is this code not working?

Posting Permissions