CANVAS - BACHGROUND-CHECK

by bizamajig

HTML

<div id="gradient">
            <div class="text">COMPANY NAME</div>
            <div class="h_bar"></div>
            <div class="v_bar"></div>
        </div>
        <div id="content">
            <h3 class="label">Change layout!</h3>
            <form>
                <fieldset>
                    <legend>Header text</legend>
                    <label for="logo_text">Text:</label>
                    <input type="text" id="logo_text" size="30" value="COMPANY NAME" />
                    <br />
                    <label for="logo_size">Size:</label>
                    <input type="number" id="logo_size" value="40" />
                    <br />
                    <label for="logo_font">Font:</label>
                    <select id="logo_font">
                        <option>arial, verdana, sans-serif</option>
                        <option>Georgia, serif</option>
                        <option>Impact, Charcoal, sans-serif</option>
                    </select>
                </fieldset>
                <br />
                <fieldset>
                    <legend>Bars</legend>
                    <label for="top_bar">Top bar:</label>
                    <input type="number" id="top_bar" value="20" />
                    <br />
                    <label for="left_bar">Left bar:</label>
                    <input type="number" id="left_bar" value="20" />
                    <br />
                </fieldset>
            </form>
        </div>

CSS

body {height: 100%; width: 100%; margin: 0; padding: 0;}
            #gradient {position: absolute; background: #000; top: 5%; left: 5%; right: 5%; bottom: 5%;}
            .text {position: absolute; top: 20px; left: 100px; width: 400px; color: #fff; font-size: 40px; font-family: arial, verdana, sans-serif; font-weight: bold;}
            .h_bar {position: absolute; height: 20px; top: 100px; left: 60px; right: 60px; background: #fff;}
            .v_bar {position: absolute; width: 20px; top: 140px; bottom: 30px; right: 60px; background: #fff;}
            
            /* for demo, changing the appearance */
            #content {position: absolute; top: 24%; left: 10%; right: 20%; bottom: 10%; font-family: arial, verdana, sans-serif; color: #fff;}
            fieldset { padding: 1em; width: 330px;}
            label { float:left;  width: 90px; margin-right:0.5em; padding-top:0.2em; text-align:right; font-weight:bold; }

JavaScript

var gradSite = {
    init: function() {
        var self = this;
        self.create().setSizes().events();
        (function animationloop(){
            requestAnimationFrame(animationloop);
            self.draw().colors.generate();
        })();
    },
    create: function() { // creates the canvas elements
        this.canvas     = document.createElement('canvas');
        this.canvas2    = document.createElement('canvas');
        this.canvas.id  = 'canvas1';
        this.canvas2.id = 'canvas2';
        this.canvas.style.position = 'absolute';
        this.canvas2.style.position = 'absolute';
        $('#gradient').after(this.canvas, this.canvas2);
        return this;
    },
    events: function() { //event handlers
        $(window).on('resize', this.setSizes);
        $('#gradient').on('contentchange', this.draw2);
        return this;
    },
    setSizes: function() { // sets sizes on load and resize
        var self = gradSite,
            w    = $(window),
            m    = $('#gradient');
            
        self.canvas.height      = w.height();
        self.canvas.width       = w.width();
        self.canvas2.bg         = m.css('background-color');
        self.canvas2.height     = m.height();
        self.canvas2.width      = m.width();
        self.canvas2.style.top  = m.offset().top + 'px';
        self.canvas2.style.left = m.offset().left + 'px';
        self.draw2();
        return self;
    },
    colors: {
        colors: {
                0: [255,255,0],
                1: [255,170,0],
                2: [255,0,0]
        },
        map: {
                0: [0,0,1],
                1: [0,1,1],
                2: [0,1,1]
        },
        generate: function() { // generates the random colors
            var self = this;
            $.each(self.colors, function(i,color) {
                $.each(color, function(j, c) {
                    var r   = Math.random(),
                        r2  = Math.random(),
                        val =...