javascript - Download canvas image using JS Jquery -

i'm trying download canvas image desktop using following code:

<script type="text/javascript">     var canvas;     $(document).ready(function() {       if ($('#designs-wrapper').length) {         $('.design').each(function() {           var design = $(this).attr('data-design');           var canvas = $(this).find('canvas')[0];           var ctx = canvas.getcontext('2d');           var img = new image;           img.onload = function() {             ctx.drawimage(this, 0, 0);           };           img.src = design;         });       }        $('#canvas').click(function() {         this.href = canvas.todataurl();         this.download = 'design.png';       });      }); </script> 

sadly i'm getting following error:

uncaught typeerror: cannot read property 'todataurl' of undefined

does have idea how fix this?

live preview: http://dane.helpful.ninja/fds/index.php?username=z-justin

introductions: 1) click image 2) see dev console

edit:

after updating code following:

define canvas in global-scope remove var var canvas = $(this).find('canvas')[0];

the following error pops up:

uncaught securityerror: failed execute 'todataurl' on 'htmlcanvaselement': tainted canvases may not exported.

you can't use canvas variable call ready method method gets executed , scope of canvas variable gets ended. when call click callback, there not instance of canvas variable ended.

<script type="text/javascript">     var canvas;     $(document).ready(function() {       if ($('#designs-wrapper').length) {         $('.design').each(function() {           var design = $(this).attr('data-design');           var canvas = $(this).find('canvas')[0];           var ctx = canvas.getcontext('2d');           var img = new image;           img.onload = function() {             ctx.drawimage(this, 0, 0);           };           img.src = design;         });       }        $('#canvas').click(function() {         this.href = $('#canvas')[0].todataurl();// change here         this.download = 'design.png';       });      }); </script>