I'm attempting to use HTML5 to bring in an image file, draw it to the canvas, do some manipulation of it, then return the dataURL so that I can reference this newly generated image.

Here's a quick example of what the image loading code looks like:

```
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
    c = document.getElementById("myCanvas");
    cxt = c.getContext("2d");

    var img=new Image();
    img.src = "http://www.google.com/images/srpr/logo3w.png";
    //img.src = 'image/placemark.png';
    img.onload = function() {
        cxt.drawImage(img, 0, 0);
    }

    console.log(c.toDataURL());
</script>

```

So, with the code like that the log of c.toDataURL() is a blank canvas, presumably because the `log()` call is executed before the `draw()` function finishes. If instead, I move that log call inside `draw()` I get a JavaScript error: `SecurityError: The operation is insecure`

If instead, I use the local image and put the `log` in to the `draw` function, I get the expected output there - but still blank canvas outside the function

I guess my actual question is: how can load in an external image to a canvas, and then modify it's contents in some fashion?