    
var initList = initList || []; 
initList.push(function() {
    function init(){
        var $canvas = $("#canvas");
        var g = $canvas[0].getContext('2d');
        var drawFlag;
        var dibujarbool = true;
        
        $canvas.bind("mousedown touchstart", function(e){
            //drawFlag = true;

            if(!dibujarbool){
                return;
            }

            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,$canvas);
            var ypos = getOffsetY(e,$canvas);
            //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.aa').click(function(){
            g.strokeStyle = $(this).attr("col");
            console.log("click");
        });

    }
    init();


    function init2(){
        var $canvas1 = $("#canvas1");
        var g = $canvas1[0].getContext('2d');
        var drawFlag;
        var dibujarbool = true;
        
        $canvas1.bind("mousedown touchstart", function(e){
            //drawFlag = true;

            if(!dibujarbool){
                return;
            }

            g.beginPath();
            g.moveTo(e.offsetX, e.offsetY);
            $canvas1.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");
        
        $canvas1.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,$canvas1);
            var ypos = getOffsetY(e,$canvas1);
            g.lineTo(xpos, ypos);
            //g.lineTo(e.offsetX, e.offsetY);
            g.stroke();
        }

        // var limpiar1 = document.getElementById("limpiar1");
        // limpiar1.addEventListener("click",function(){
        //     canvas1.width=canvas1.width;
        // },false);
        $('.can img.aa').click(function(){
            g.strokeStyle = $(this).attr("col");
            console.log("click");
        });

    }
    init2();


    function init3(){
        var $canvas2 = $("#canvas2");
        var g = $canvas2[0].getContext('2d');
        var drawFlag;
        var dibujarbool = true;
        
        $canvas2.bind("mousedown touchstart", function(e){
            //drawFlag = true;

            if(!dibujarbool){
                return;
            }

            g.beginPath();
            g.moveTo(e.offsetX, e.offsetY);
            $canvas2.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");
        
        $canvas2.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,$canvas2);
            var ypos = getOffsetY(e,$canvas2);
            g.lineTo(xpos, ypos);
            //g.lineTo(e.offsetX, e.offsetY);
            g.stroke();
        }

        // var limpiar = document.getElementById("limpiar2");
        // limpiar.addEventListener("click",function(){
        //     canvas2.width=canvas2.width;
        // },false);
        $('.can img.aa').click(function(){
            g.strokeStyle = $(this).attr("col");
            console.log("click");
        });

    }
    init3();


    function init4(){
        var $canvas3 = $("#canvas3");
        var g = $canvas3[0].getContext('2d');
        var drawFlag;
        var dibujarbool = true;
        
        $canvas3.bind("mousedown touchstart", function(e){
            //drawFlag = true;

            if(!dibujarbool){
                return;
            }

            g.beginPath();
            g.moveTo(e.offsetX, e.offsetY);
            $canvas3.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");
        
        $canvas3.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,$canvas3);
            var ypos = getOffsetY(e,$canvas3);
            g.lineTo(xpos, ypos);
            //g.lineTo(e.offsetX, e.offsetY);
            g.stroke();
        }

        // var limpiar = document.getElementById("limpiar3");
        // limpiar.addEventListener("click",function(){
        //     canvas3.width=canvas3.width;
        // },false);
        $('.can img.aa').click(function(){
            g.strokeStyle = $(this).attr("col");
            console.log("click");
        });

    }
    init4();


    // get the correct y mouse position in according relative to the canvas 
        function getOffsetX(e,canvs) {
                var rect = canvs.get(0).getBoundingClientRect();
                return (e.pageX- rect.left)*scaleRectDiv();
        }
        // get the correct y mouse position in according relative to the canvas 
        function getOffsetY(e,canvs) {
                var rect = canvs.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;
        }
});