Screen Capture Canvas

by eprouver

HTML

<canvas id="gameCanvas" width="500" height="400"></canvas>
<br/>
<a href='javascript:var c=document.getElementById("gameCanvas"),i=document.createElement("img");i.setAttribute("src",c.toDataURL());i.style.width="50%";i.style.border="1px solid red";var h=document.createElement("div");h.setAttribute("id","xxx_copy");h.style.zIndex=999;h.style.position="absolute";h.style.top="0";h.style.left="20%";h.style.width="50%";h.style.background="white";h.style.padding="5px";h.style.margin="5px auto";var l=document.createElement("div");l.style.float="right";l.innerHTML="X";l.style.cursor="pointer";l.addEventListener("click",function(){document.body.removeChild(this.parentNode);});h.appendChild(l);h.appendChild(i);document.body.appendChild(h)'> Canvas Pop</a>

<button onclick="popcanvas()">With Drawing</button>

JavaScript

var canvas = document.getElementById('gameCanvas');
      var context = canvas.getContext('2d');

      // draw cloud
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = '#0000ff';
      context.stroke();

function popcanvas(){
var __slice=Array.prototype.slice;(function(a){var b;return a.fn.sketch=function(){var c,d,e;d=arguments[0],c=2<=arguments.length?__slice.call(arguments,1):[],this.length>1&&a.error("Sketch.js can only be called on one element at a time."),e=this.data("sketch");if(typeof d!="string"||!e)return e?e:(this.data("sketch",new b(this.get(0),d)),this);if(!e[d])return a.error("Sketch.js did not recognize the given command.");if(typeof e[d]=="function")return e[d].apply(e,c);if(c.length===0)return e[d];if(c.length===1)return e[d]=c[0]},b=function(){function b(b,c){this.el=b,this.canvas=a(b),this.context=b.getContext("2d"),this.options=a.extend({toolLinks:!0,defaultTool:"marker",defaultColor:"#000000",defaultSize:5},c),this.painting=!1,this.color=this.options.defaultColor,this.size=this.options.defaultSize,this.tool=this.options.defaultTool,this.actions=[],this.action=[],this.canvas.bind("click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel",this.onEvent),this.options.toolLinks&&a("body").delegate('a[href="#'+this.canvas.attr("id")+'"]',"click",function(b){var...