Convert A canvas to image

convas2img.htm

<canvas id="MyCanvas" width="300" height="300">

</canvas>

<img id="MyImg"/>
<script>

    function drawAndConvertStuff(canvas) {
        var canvasContext = canvas.getContext('2d');
        //draw a black box
        canvasContext.fillRect(150, 25, 100, 100);
        //create image object
        var img = new Image();
        img.src = '/Content/homer.jpg';
        //wait until the image is loaded
        img.onload = function() {
            //draw the image
            canvasContext.drawImage(img, 0, 0);

            //convert it to image
            var imgSrc = canvas.toDataURL("image/png");
            $('#MyImg').attr('src', imgSrc);
        };
    }

    //get the context. Non-jquery alternate: document.getElementById('MyCanvas').getContext('2d');
    var can = $('#MyCanvas')[0];
    drawAndConvertStuff(can);
</script>