smiley canvas download

downloading canvas smiley

by Nicholas_Murray

HTML

<div id="canvas_container">
</div>
<p>
    <a href='#' id="create_image">create</a> 
    <a href="#" id="download_image">download</a>
</p>

JavaScript

$("#create_image").click(function() {
    var cnvs = createSmileyOnCanvas();
    $('#canvas_container').append(cnvs);
});


$("#download_image").click(function() {    
    var img = $('#smiley_canvas').toDataURL("image/png");
    var uriContent = "data:application/octet-stream," + encodeURIComponent(img);
    window.open(uriContent, 'download smiley image');
});



function createSmileyOnCanvas() {
  var canvas = document.createElement('canvas');      
  canvas.id = 'smiley_canvas';    
  var ctx = canvas.getContext('2d');        

    // Draw shapes
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();


  return canvas;
}