SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Canvas HTML5 - Saving as Image!?

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Moved to JS forum as seems more appropriate.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •