Save Image from canvas

by aaronk85

HTML

<canvas id="canvas" style="border:2px solid black;" width="500" height="500"></canvas>

CSS

#canvas {
    background-image:url('http://www-static2.spulsecdn.net/images/teamselector/footy_oval.jpg');
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
    "<div style='background-color:red' id='fieldshape'><div id='teams_without_pos'><div class='nopos-wrap' id='SP_HomeNoPos-wrap'><h3 class='home-hdr'>Whitehorse Pioneers</h3><div class='homeblock' id='SP_HomeNoPos'></div></div><div class='nopos-wrap' id='SP_AwayNoPos-wrap'><h3 class='away-hdr'>Heathmont</h3><div class='awayblock' id='SP_AwayNoPos'></div></div></div></div>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;