Canvas How to - Convert canvas to an image

Question

We would like to know how to convert canvas to an image.

Answer


<!--from w ww  .jav a2s  . c  om-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    context.save();
    context.fillRect(50, 50, 100, 100);
    context.fillStyle = "rgb(255, 0, 0)";
    context.fillRect(100, 100, 100, 100);
    context.restore();
    context.fillRect(150, 150, 100, 100);
    var dataURL = canvas.get(0).toDataURL();
    var img = $("<img></img>");
    img.attr("src", dataURL);
    canvas.replaceWith(img);
});//]]>  
</script>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

The code above is rendered as follows: