<!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>
【drawing_settings】
