Why is this code not working?
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!!!
Re: Why is this code not working?
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. ;)
Re: Why is this code not working?
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
Re: Why is this code not working?
Hi there WarrenW,
Perhaps I did not make myself clear in my previous post. :o
Only Firefox and Chrome render the code examples. ;)
Re: Why is this code not working?
That's what I thought after I read it again.
Thanks for helping!!
Warren
