How to use HTML5 Canvas for Drawing sketch in browser using jQuery

<div class="tools">
    <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">
        Eraser</a> <a href="javascript:" id="upload" style="width: 100px;">Upload</a>
    <a href="#colors_sketch" data-download="png" style="width: 100px;">Download</a>
</div>
<canvas id="colors_sketch" width="800" height="300" style="border: 1px solid black">
</canvas>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://intridea.github.io/sketch.js/lib/sketch.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#colors_sketch').sketch();
    });
    $("#upload").bind("click", function () {
        var oCanvas = document.getElementById("colors_sketch");
        var strDataURI = oCanvas.toDataURL();
        //Save this Base64 string to server.
        alert(strDataURI);
    });
</script>