holder.js
function render(renderSettings) {
	    var image = null;
	    var mode = renderSettings.mode;
	    var el = renderSettings.el;
	    var holderSettings = renderSettings.holderSettings;
	    var engineSettings = renderSettings.engineSettings;

	    switch (engineSettings.renderer) {
	        case 'svg':
	            if (!App.setup.supportsSVG) return;
	            break;
	        case 'canvas':
	            if (!App.setup.supportsCanvas) return;
	            break;
	        default:
	            return;
	    }

	    //todo: move generation of scene up to flag generation to reduce extra object creation
	    var scene = {
	        width: holderSettings.dimensions.width,
	        height: holderSettings.dimensions.height,
	        theme: holderSettings.theme,
	        flags: holderSettings.flags
	    };

	    var sceneGraph = buildSceneGraph(scene);

	    function getRenderedImage() {
	        var image = null;
	        switch (engineSettings.renderer) {
	            case 'canvas':
	                image = sgCanvasRenderer(sceneGraph, renderSettings);
	                break;
	            case 'svg':
	                image = svgRenderer(sceneGraph, renderSettings);
	                break;
	            default:
	                throw 'Holder: invalid renderer: ' + engineSettings.renderer;
	        }

	        return image;
	    }

	    image = getRenderedImage();

	    if (image == null) {
	        throw 'Holder: couldn\'t render placeholder';
	    }

	    //todo: add <object> canvas rendering
	    if (mode == 'background') {
	        el.style.backgroundImage = 'url(' + image + ')';

	        if (!engineSettings.noBackgroundSize) {
	            el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';
	        }
	    } else {
	        if (el.nodeName.toLowerCase() === 'img') {
	            DOM.setAttr(el, {
	                'src': image
	            });
	        } else if (el.nodeName.toLowerCase() === 'object') {
	            DOM.setAttr(el, {
	                'data': image,
	                'type': 'image/svg+xml'
	            });
	        }
	        if (engineSettings.reRender) {
	            global.setTimeout(function () {
	                var image = getRenderedImage();
	                if (image == null) {
	                    throw 'Holder: couldn\'t render placeholder';
	                }
	                //todo: refactor this code into a function
	                if (el.nodeName.toLowerCase() === 'img') {
	                    DOM.setAttr(el, {
	                        'src': image
	                    });
	                } else if (el.nodeName.toLowerCase() === 'object') {
	                    DOM.setAttr(el, {
	                        'data': image,
	                        'type': 'image/svg+xml'
	                    });
	                }
	            }, 150);
	        }
	    }
	    //todo: account for re-rendering
	    DOM.setAttr(el, {
	        'data-holder-rendered': true
	    });
	}
function render(renderSettings) {
	    var image = null;
	    var mode = renderSettings.mode;
	    var el = renderSettings.el;
	    var holderSettings = renderSettings.holderSettings;
	    var engineSettings = renderSettings.engineSettings;

	    switch (engineSettings.renderer) {
	        case 'svg':
	            if (!App.setup.supportsSVG) return;
	            break;
	        case 'canvas':
	            if (!App.setup.supportsCanvas) return;
	            break;
	        default:
	            return;
	    }

	    //todo: move generation of scene up to flag generation to reduce extra object creation
	    var scene = {
	        width: holderSettings.dimensions.width,
	        height: holderSettings.dimensions.height,
	        theme: holderSettings.theme,
	        flags: holderSettings.flags
	    };

	    var sceneGraph = buildSceneGraph(scene);

	    function getRenderedImage() {
	        var image = null;
	        switch (engineSettings.renderer) {
	            case 'canvas':
	                image = sgCanvasRenderer(sceneGraph, renderSettings);
	                break;
	            case 'svg':
	                image = svgRenderer(sceneGraph, renderSettings);
	                break;
	            default:
	                throw 'Holder: invalid renderer: ' + engineSettings.renderer;
	        }

	        return image;
	    }

	    image = getRenderedImage();

	    if (image == null) {
	        throw 'Holder: couldn\'t render placeholder';
	    }

	    //todo: add <object> canvas rendering
	    if (mode == 'background') {
	        el.style.backgroundImage = 'url(' + image + ')';

	        if (!engineSettings.noBackgroundSize) {
	            el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';
	        }
	    } else {
	        if (el.nodeName.toLowerCase() === 'img') {
	            DOM.setAttr(el, {
	                'src': image
	            });
	        } else if (el.nodeName.toLowerCase() === 'object') {
	            DOM.setAttr(el, {
	                'data': image,
	                'type': 'image/svg+xml'
	            });
	        }
	        if (engineSettings.reRender) {
	            global.setTimeout(function () {
	                var image = getRenderedImage();
	                if (image == null) {
	                    throw 'Holder: couldn\'t render placeholder';
	                }
	                //todo: refactor this code into a function
	                if (el.nodeName.toLowerCase() === 'img') {
	                    DOM.setAttr(el, {
	                        'src': image
	                    });
	                } else if (el.nodeName.toLowerCase() === 'object') {
	                    DOM.setAttr(el, {
	                        'data': image,
	                        'type': 'image/svg+xml'
	                    });
	                }
	            }, 150);
	        }
	    }
	    //todo: account for re-rendering
	    DOM.setAttr(el, {
	        'data-holder-rendered': true
	    });
	}
function render ( renderSettings ) { var image = null ; var mode = renderSettings . mode ; var el = renderSettings . el ; var holderSettings = renderSettings . holderSettings ; var engineSettings = renderSettings . engineSettings ; switch ( engineSettings . renderer ) { case 'svg' : if ( ! App . setup . supportsSVG ) return ; break ; case 'canvas' : if ( ! App . setup . supportsCanvas ) return ; break ; default : return ; } //todo: move generation of scene up to flag generation to reduce extra object creation var scene = { width : holderSettings . dimensions . width , height : holderSettings . dimensions . height , theme : holderSettings . theme , flags : holderSettings . flags } ; var sceneGraph = buildSceneGraph ( scene ) ; function getRenderedImage ( ) { var image = null ; switch ( engineSettings . renderer ) { case 'canvas' : image = sgCanvasRenderer ( sceneGraph , renderSettings ) ; break ; case 'svg' : image = svgRenderer ( sceneGraph , renderSettings ) ; break ; default : throw 'Holder: invalid renderer: ' + engineSettings . renderer ; } return image ; } image = getRenderedImage ( ) ; if ( image == null ) { throw 'Holder: couldn\'t render placeholder' ; } //todo: add <object> canvas rendering if ( mode == 'background' ) { el . style . backgroundImage = 'url(' + image + ')' ; if ( ! engineSettings . noBackgroundSize ) { el . style . backgroundSize = scene . width + 'px ' + scene . height + 'px' ; } } else { if ( el . nodeName . toLowerCase ( ) === 'img' ) { DOM . setAttr ( el , { 'src' : image } ) ; } else if ( el . nodeName . toLowerCase ( ) === 'object' ) { DOM . setAttr ( el , { 'data' : image , 'type' : 'image/svg+xml' } ) ; } if ( engineSettings . reRender ) { global . setTimeout ( function ( ) { var image = getRenderedImage ( ) ; if ( image == null ) { throw 'Holder: couldn\'t render placeholder' ; } //todo: refactor this code into a function if ( el . nodeName . toLowerCase ( ) === 'img' ) { DOM . setAttr ( el , { 'src' : image } ) ; } else if ( el . nodeName . toLowerCase ( ) === 'object' ) { DOM . setAttr ( el , { 'data' : image , 'type' : 'image/svg+xml' } ) ; } } , 150 ) ; } } //todo: account for re-rendering DOM . setAttr ( el , { 'data-holder-rendered' : true } ) ; }
Core function that takes output from renderers and sets it as the source or background-image of the target element

@private
@param renderSettings Renderer settings
Core function that takes output from renderers and sets it as the source or background - image of the target element