SOURCE

$(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);
});

<canvas id="myCanvas" width="500" height="500"></canvas>