Draw in canvas and save as image

by stofke

HTML

<script src="http://f.cl.ly/items/3S081X0d1M15213R030g/base64.js"></script>
<script src="http://f.cl.ly/items/0143062g093g2Y0f362M/canvas2image.js"></script>
<script src="http://me.eae.net/projects/iecanvas/iecanvas.js"></script>
<h1>Draw on the image & click save generate an image with the drawing</h1>

<div id="main-wrapper">
    <canvas width="600" height="525" style="border:1px solid black;" id="thecanvas"></canvas>
    <img id="canvasimage" src="" />
    <br/>
    <input type="button" id="resetbtn" value="Reload" />
    <input type="button" id="convertpngbtn" value="Save" />
</div>

CSS

h1 {
    font-size:x-large;
}

JavaScript

var bMouseIsDown = false;

var cbCanvas = document.getElementById("thecanvas");
var cbCtx = cbCanvas.getContext("2d");

var iWidth = cbCanvas.width;
var iHeight = cbCanvas.height;

cbCtx.fillStyle = "rgb(255,255,255)";
cbCtx.fillRect(0, 0, iWidth, iHeight);

cbCtx.beginPath();
cbCtx.strokeStyle = "rgb(255,0,0)";
cbCtx.strokeWidth = "4px";

var img = new Image();
img.onload = function () {
    cbCtx.drawImage(img, 0, 0);
};
img.src =...