...

View Full Version : Canvas HTML5 - Saving as Image!?



Bilginok
11-02-2011, 12:05 PM
Hello,

hopefully i can find help here
I want to save my canvas-content to a single image-file. There are an approach using todataurl(), which works fine. But not if i draw an image-file (e.g. car.jpg or house.png) to the canvas additionally. It does not return the whole image? Here I have my simple example-code:

<head>
<script>
window.onload = function()
{

var canvas = document.getElementById("theCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "navy";
context.fillRect(0,0,20,20);

var imagefile = new Image();
imagefile.onload = function ()
{
context.drawImage(imagefile, 22, 0,60,60);
}
imagefile.src = "http://www.sign-arts.de/joomla/images/stories/print_proj/mediclin/icon1.gif";

window.open(canvas.toDataURL('image/png'));

};
</script>
</head>
<body id="bodi">
<canvas id="theCanvas" width="500" height="200" >
</canvas>
</body>

Only the HTML5-methods like fillRect() are rendered to the new window, why this is so? What im doing wrong?
Thanx in advance for help
bilinok



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum