An html5 canvas with multiple layers

Multilayer Canvas

// Canvas with multiple layers
// copyright 2015 by Fred Moolekamp
// MIT License
initMultiCanvas=function(div,options){
    var $div;
    if(div instanceof jQuery){
        $div=div;
    }else{
        $div=$(div);
    };
    var multiCanvas=$.extend(true,{
        $div:$div,
        //layers:[],
        frames:[],
        nextId:0,
        current_frame:null,
        current_frame_idx:0,
        width:600,
        height:400,
        mousedown:false,
        canvasMouseDown:function(){},
        canvasMouseUp:function(){},
        canvasMouseMove:function(){},
        addFrame:function(options){
            var frame=$.extend(true,{
                layers:[],
                id:multiCanvas.nextId++,
            },options);
            multiCanvas.frames.push(frame);
            if(multiCanvas.current_frame!==null){
                multiCanvas.hide();
            };
            multiCanvas.current_frame=frame;
            multiCanvas.current_frame_idx=multiCanvas.frames.length-1;
            return frame;
        },
        setCurrentFrame:function(frame){
            multiCanvas.hide();
            if(isNaN(frame)){
                multiCanvas.current_frame=frame;
                multiCanvas.current_frame_idx=multiCanvas.frame.indexOf(frame);
            }else{
                multiCanvas.current_frame_idx=frame;
                multiCanvas.current_frame=multiCanvas.frames[multiCanvas.current_frame_idx];
            };
            if(multiCanvas.current_frame.image!==null){
                console.log('new file:',multiCanvas.current_frame.image.fileId);
                //console.log('image:',multiCanvas.current_frame.image);
            }
            multiCanvas.show();
        },
        removeFrame:function(frame){
            if(multiCanvas.frames.length>1){
                multiCanvas.clear();
                var index=0;
                if(isNaN(frame)){
                    index=multiCanvas.frames.indexOf(frame);
                }else{
                    index=multiCanvas.frames[frame];
                };
                multiCanvas.frames.splice(index,1);
                if(multiCanvas.current_frame_idx>index){
                    multiCanvas.current_frame=multiCanvas.frames[index-1];
                    setCurrentFrame(multiCanvas.current_frame);
                }else if(multiCanvas.current_frame_idx==index){
                    multiCanvas.current_frame=multiCanvas.frames[index-1];
                    setCurrentFrame(multiCanvas.current_frame);
                }
            }else{
                alert("MultiCanvas must have at least one frame");
            };
        },
        addLayer:function(options){
            options=options || {};
            var $canvas=$('<canvas/>')
                .mousedown(multiCanvas.canvasMouseDown)
                .mouseup(multiCanvas.canvasMouseUp)
                .mousemove(multiCanvas.canvasMouseMove);
            $canvas[0].mousedown=false;
            if(options.hasOwnProperty('canvas')){
                $canvas=$(options.canvas);
            };
            for(prop in options.props){
                $canvas.prop(prop,options.props[prop]);
            };
            for(style in options.css){
                $canvas.css(style,options.css[style]);
            };
            
            // Force all canvas' to be the same size and at the same location
            $canvas
                .prop('width',multiCanvas.width)
                .prop('height',multiCanvas.height)
                .css({
                    'position':'absolute',
                    'top':multiCanvas.$div.offset().top+'px',
                    'left':multiCanvas.$div.offset().left+'px'
                });
                
            var layer=$.extend(true,{
                canvas:$canvas[0],
                visible:true,
                // Objects to be displayed on the canvas
                // (each one requires a draw function to display it on the canvas)
                objects:[], 
                show:function(){
                    layer.visible=true;
                    layer.canvas.style.visibility='visible';
                },
                draw:function(){
                    layer.visible=true;
                    layer.canvas.style.visibility='visible';
                    for(var i=0;i<layer.objects.length;i++){
                        layer.objects[i].draw();
                    }
                },
                clear:function(){
                    ctx=layer.canvas.getContext('2d');
                    ctx.save();
                    ctx.setTransform(1,0,0,1,0,0);
                    ctx.clearRect(0,0,layer.canvas.width,layer.canvas.height);
                    ctx.restore();
                },
                clearAll:function(){
                    // This will completely reset the canvas state (transformations, stroke styles, etc.)
                    layer.canvas.width=layer.canvas.width;
                },
                hide:function(){
                    layer.visible=false;
                    layer.canvas.style.visibility='hidden';
                }
            },options.layer);
            //layer.hide();
            multiCanvas.$div.append($canvas[0]);
            multiCanvas.current_frame.layers.push(layer);
            return layer;
        },
        clear:function(){
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                multiCanvas.current_frame.layers[i].clear();
            }
        },
        clearAll:function(){
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                multiCanvas.current_frame.layers[i].clearAll();
            }
        },
        show:function(){
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                if(multiCanvas.current_frame.layers[i].visible){
                    multiCanvas.current_frame.layers[i].show();
                }
            }
        },
        showAll:function(){
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                multiCanvas.current_frame.layers[i].show();
            }
        },
        hide:function(){
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                //multiCanvas.current_frame.layers[i].hide();
                multiCanvas.current_frame.layers[i].canvas.style.visibility='hidden';
            }
        },
        changeProp:function(prop,value){
            multiCanvas.current_frame[prop]=value;
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                multiCanvas.current_frame.layers[i][prop]=value;
            };
        },
        changeCanvasProp:function(prop,value){
            multiCanvas.current_frame[prop]=value;
            for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
                multiCanvas.current_frame.layers[i].canvas[prop]=value;
            };
        }
    },options);
    
    return multiCanvas;
};