function init(){
        var $canvas = $("#canvas");
        var g = $canvas[0].getContext('2d');
        var drawFlag;
      
        $canvas.bind("mousedown touchstart", function(e){
            g.beginPath();
            g.moveTo(e.offsetX, e.offsetY);
            $canvas.bind("mousemove touchmove", drawing);
        }).bind("mouseout", function(e){
            /*
            if(drawFlag){
                g.lineTo(e.offsetX, e.offsetY);
                g.stroke();
            }
            */
            drawFlag = false;
        }).bind("mouseover ", function(e){

            if(!drawFlag){
                drawFlag = true;
                g.beginPath();
                g.moveTo(e.offsetX, e.offsetY);
            }
            //drawFlag = true;
        }).css("cursor", "pointer");
        $canvas.bind("mouseup touchend", function(e){
            //drawFlag = false;
            $(this).unbind("mousemove touchmove");
        });
        $stage
        function drawing(e){
            //if(!drawFlag) return;
            console.log('Drawing');
            var xpos = getOffsetX(e);
            var ypos = getOffsetY(e);
            //g.lineTo(e.offsetX, e.offsetY);
            g.lineTo(xpos, ypos);
            g.stroke();
        }
        var limpiar = document.getElementById("limpiar");
        limpiar.addEventListener("click",function(){
            canvas.width=canvas.width;
        },false);
        $('.can img').click(function(){
            g.strokeStyle = $(this).attr("col");
        });


        // get the correct y mouse position in according relative to the canvas 
        function getOffsetX(e) {
                var rect = $canvas.get(0).getBoundingClientRect();
                return (e.pageX- rect.left)*scaleRectDiv();
        }
        // get the correct y mouse position in according relative to the canvas 
        function getOffsetY(e) {
                var rect = $canvas.get(0).getBoundingClientRect();
                return (e.pageY- rect.top)*scaleRectDiv();
            // }
        }
        function scaleRectDiv(){
            var stageI = $("#stage");
            var rect = stageI.get(0).getBoundingClientRect();
            var scalation= stageI.width()/rect.width;
            return scalation;
        }
    }