I'm creating a web app to create pixel maps for large LED displays. The maps are basically large checkerboard patterns of various sizes with different constraints. I'm running into snags trying to draw arrows pointing in certain directions dependent on their position within a) the entire grid, and b) within smaller sub-sections of the map. Upon loading the jsfiddle, you can scroll down and see a correct example. The arrows snake through the red/blue area of the map from left to right, going down one row at a time. Now if you select the second data flow option (the 2nd radio button from the left on the top row of radio buttons) you'll see the direction of the arrows change but the map doesn't draw correctly. I need help getting this running efficiently. Nested loops within loops within loops seems slow. Plus I'm just in over my head and a bit confused. There's a working earlier version of the app at (http://www.blinkingthings.com) if you need a more complete picture of what I'm asking for.I'd also appreciate any criticism of this javascript as it's not my expertise.Javascript: $(function(){    var canvas=document.getElementById(canvas);    var ctx=canvas.getContext(2d);    var width=128;    var height=128;    var columns=16;    var rows=9;    var color1=#d9534f;//redish    var color2=#428bca;//bluish    var color4=#00FF00;//greenish    var color3=#FFFF00;//yellowish    var textcolor=#FFFFFF;    var datacolor=#FFFFFF;    var bordercolor =#5cb85c;    var dataStartColor =#5cb85c;    var infoBackgroundColor = rgba(255,255,255,.01);    var infoForegroundColor = rgba(0,0,255,.1);    var upArr = '\u2191';    var downArr = '\u2193';    var leftArr = '\u2190';    var rightArr = '\u2192';    var stopSign = '\uD83D\uDEAB';    var omega = '\u03A9';    var oddOrEven = odd;    var colOddEven = odd;    var dataFlow = 1;    var drawCoords = true;    var drawData = true;    var drawInfo = true;    var drawUser = false;    var counter = 1;    var xStart=0;     var yStart=0;    var resWidthLimit=1920;    var resHeightLimit=1080;    var colsLimit = Math.floor(resWidthLimit/width);    var rowsLimit = Math.floor(resHeightLimit/height);    var outputsHigh = Math.ceil(rows/rowsLimit);    var outputsWide = Math.ceil(columns/colsLimit);    var alphabet = a b c d e f g h i j k l m n o p q r s t u v w x y z aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz.split( );    var topEdge = false;    var bottomEdge = false;    var leftEdge = false;    var rightEdge = false;    var rowsOdd = false;    var columnsOdd = false;    var outTopEdge = false;    var outBottomEdge = false;    var outLeftEdge = false;    var outRightEdge = false;    var outRowsOdd = false;    var outColumnsOdd = false;    // references to the input-text elements     // used to let user change the rect width & height    var $width=document.getElementById('width');    var $height=document.getElementById('height');    var $rows=document.getElementById('rows');    var $columns=document.getElementById('columns');    var $resWidthLimit=document.getElementById('resWidthLimit');    var $resHeightLimit=document.getElementById('resHeightLimit');    var $tileSwap=document.getElementById('tileSwap');    var $wallSwap=document.getElementById('wallSwap');    var $outputSwap=document.getElementById('outputSwap');    var $tilePresets=document.getElementById('tilePresets');    var $outputPresets=document.getElementById('outputPresets');    var $colSlide=document.getElementById('colSlide');    var $rowSlide=document.getElementById('rowSlide');    var $radio1=document.getElementById('radio1');    var $radio2=document.getElementById('radio2');    var $radio3=document.getElementById('radio3');    var $radio4=document.getElementById('radio4');    var $radio5=document.getElementById('radio5');    var $radio6=document.getElementById('radio6');    var $radio7=document.getElementById('radio7');    var $radio8=document.getElementById('radio8');      var $drawcoords=document.getElementById('draw_coords_check');    var $drawdata=document.getElementById('draw_data_check');    var $drawinfo=document.getElementById('draw_info_check');    var $drawuser=document.getElementById('draw_user_check');    // set the initial input-text values to the width/height vars    $width.value=width;    $height.value=height;    $rows.value=rows;    $columns.value=columns;    $resWidthLimit.value=resWidthLimit;    $resHeightLimit.value=resHeightLimit;    $width.addEventListener(change, function(){        width=this.value; //.value converts input field int to string***        outputsWide = Math.ceil(columns/colsLimit);        colsLimit = Math.floor(resWidthLimit/width);        draw();    }, false);    $height.addEventListener(change, function(){        height=this.value; //.value converts input field int to string***        outputsHigh = Math.ceil(rows/rowsLimit);        rowsLimit = Math.floor(resHeightLimit/height);        draw();    }, false);    $rows.addEventListener(keyup, function(){        rows=this.value; //.value converts input field int to string***        outputsHigh = Math.ceil(rows/rowsLimit);        draw();    }, false);    $columns.addEventListener(keyup, function(){        columns=this.value; //.value converts input field int to string***        outputsWide = Math.ceil(columns/colsLimit);        draw();    }, false);    $resWidthLimit.addEventListener(keyup, function(){        resWidthLimit=this.value; //.value converts input field int to string***        colsLimit = Math.floor(resWidthLimit/width);        outputsWide = Math.ceil(columns/colsLimit);        setTimeout(function() { draw(); }, 500); //had to add small delay to prevent crashing. look into    }, false);    $resHeightLimit.addEventListener(keyup, function(){        resHeightLimit=this.value; //.value converts input field int to string***        rowsLimit = Math.floor(resHeightLimit/height);        outputsHigh = Math.ceil(rows/rowsLimit);        setTimeout(function() { draw(); }, 500); //had to add small delay to prevent crashing. look into    }, false);    $wallSwap.addEventListener(click, function(){        var temp = $('#columns').val();        $('#columns').val($('#rows').val());        $('#rows').val(temp);        columns=$('#columns').val();        rows=$('#rows').val();        outputsWide = Math.ceil(columns/colsLimit);        outputsHigh = Math.ceil(rows/rowsLimit);        draw();    }, false);    $tileSwap.addEventListener(click, function(){        var temp = $('#width').val();        $('#width').val($('#height').val());        $('#height').val(temp);        width=$('#width').val();        height=$('#height').val();        outputsWide = Math.ceil(columns/colsLimit);        colsLimit = Math.floor(resWidthLimit/width);        outputsHigh = Math.ceil(rows/rowsLimit);        rowsLimit = Math.floor(resHeightLimit/height);        draw();    }, false);    $outputSwap.addEventListener(click, function(){        var temp = $('#resWidthLimit').val();        $('#resWidthLimit').val($('#resHeightLimit').val());        $('#resHeightLimit').val(temp);        resWidthLimit=$('#resWidthLimit').val();        resHeightLimit=$('#resHeightLimit').val();        colsLimit = Math.floor(resWidthLimit/width);        rowsLimit = Math.floor(resHeightLimit/height);        draw();    }, false);    $tilePresets.addEventListener(click, function(){        width=$('#width').val();        height=$('#height').val();        outputsHigh = Math.ceil(rows/rowsLimit);        rowsLimit = Math.floor(resHeightLimit/height);        outputsWide = Math.ceil(columns/colsLimit);        colsLimit = Math.floor(resWidthLimit/width);        draw();    }, false);    $outputPresets.addEventListener(click, function(){        resWidthLimit=$('#resWidthLimit').val();        resHeightLimit=$('#resHeightLimit').val();        rowsLimit = Math.floor(resHeightLimit/height);        colsLimit = Math.floor(resWidthLimit/width);        draw();    }, false);    $radio1.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***        draw();    }, false);     $radio2.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***         draw();    }, false);     $radio3.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***         draw();    }, false);     $radio4.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***         draw();    }, false);       $radio5.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***         draw();    }, false);     $radio6.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***         draw();    }, false);     $radio7.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***        draw();    }, false);     $radio8.addEventListener(click, function(){        dataFlow=this.value; //.value converts input field int to string***        draw();    }, false);      $drawcoords.addEventListener(change, function(){        drawCoords = !drawCoords; //flips boolean of drawCoords t/f        draw();    }, false);      $drawdata.addEventListener(change, function(){        drawData = !drawData; //flips boolean of drawData t/f        draw();    }, false);    $drawinfo.addEventListener(change, function(){        drawInfo = !drawInfo; //flips boolean of drawInfo t/f        draw();    }, false);    $drawuser.addEventListener(change, function(){        drawUser = !drawUser; //flips boolean of drawUser t/f        draw();    }, false);    draw();//inital draw    function draw(){        clearAll();        tilesByOutput();    }//end draw()    function clearAll(){        ctx.canvas.width = +width * +columns; //set entire canvas width        ctx.canvas.height = +height * +rows; //set entire canvas height        ctx.clearRect(0,0,canvas.width,canvas.height); //clear out entirety of canvas        xStart=0; //reset x coord to 0 (default)        yStart=0; //reset y coord to 0 (default)    }    function allTiles(){        for (var j = 0; j < rows; j++){ //for every row under limit            for (var i = 0; i < columns; i++) { //for every column under limit                (i % 2) !=1 ? colOddEven = odd : colOddEven = even; //every other column                if ((j % 2) !=1){ //for every other row                    oddOrEven = odd;                    (i % 2) != 1 ? ctx.fillStyle=red : ctx.fillStyle=blue;//start alternating patter with color option 1                 } else {                    oddOrEven = even;                    //start alternating patter with color option 2                    (i % 2) != 1 ? ctx.fillStyle=blue : ctx.fillStyle=red;                 } //end if/else                ctx.fillRect(xStart,yStart,width,height); //draw single tile                console.log(Single Tile Drawn at : ( + xStart + ,  + yStart + ));                xStart = +xStart + +width; //shift starting coords for next column            }//end columns for            xStart = 0;  //reset x coord to 0 (default) for begining of next row            yStart = +yStart + +height;  //shift starting coords for next row        }//end rows for    }//end allTiles    function tilesByOutput(){        for (var l=0; l<=outputsWide; l++){//for each necessary output (width)            //console.log(Output Width =  + l);            for(var k=0; k<=outputsHigh; k++){//for each necessary output (height)                xStart = +colsLimit*l * +width;//0 on first loop, moves to right edge of output after                yStart = +rowsLimit*k * +height;//0 on first loop, moves to bottom edge of output after                for (var j = rowsLimit*k; (j < rowsLimit*(k+1)); j++){ //for every row wihtin current output's limit                    for (var i = colsLimit*l; (i < colsLimit*(l+1) ); i++) { //for every column within current output's limit                        if (i>columns-1) //previous loops are running too many times, this safeguards them.                        {                            continue;                        } else if (j>rows-1){                            continue;                        }//end of for loop safeguard                        var xLimit = i-(colsLimit*l);                        var yLimit = j-(rowsLimit*k);                        i == columns-1 ? rightEdge = true : rightEdge = false;                                  i == 0 ? leftEdge = true : leftEdge = false;                        j == rows-1 ? bottomEdge = true : bottomEdge = false;                        j == 0 ? topEdge = true : topEdge = false;                        (i % 2) != 1 ? columnsOdd = true : columnsOdd = false;                              (j % 2) != 1 ?  rowsOdd = true : rowsOdd = false;                        xLimit == colsLimit-1 ? outRightEdge = true : outRightEdge = false;                                 xLimit == 0 ? outLeftEdge = true : outLeftEdge = false;                        yLimit == rowsLimit-1 ? outBottomEdge = true : outBottomEdge = false;                        yLimit == 0 ? outTopEdge = true : outTopEdge = false;                        (xLimit % 2) != 1 ? outColumnsOdd = true : outColumnsOdd = false;                               (yLimit % 2) != 1 ? outRowsOdd = true : outRowsOdd = false;                        (i % 2) !=1 ? colOddEven = odd : colOddEven = even; //every other column odd or even (for data arrows)                        //Step 1 : Figure out background color for current tile.                        (l % 2) !=1 ? ( //if output x coord (l) is odd combo 1 : even combo 2                            (k % 2) !=1 ? ( //if output y coord is odd (k) combo 1 : even combo 2                                (outRowsOdd) ? ( //for every other row                           //rows: every other row in current output alternate between c1/c2                                    oddOrEven = odd,                                    (outColumnsOdd) ? ctx.fillStyle=color1 : ctx.fillStyle=color2//columns: odds c1 : evens c2 (first row, first column is color1)                                ) : ( //middle j                                                next row                                    oddOrEven = even,                                    (outColumnsOdd) ? ctx.fillStyle=color2 : ctx.fillStyle=color1//columns: odds c2 : evens c1                                ) //end j                                                       end of rows for output v1                            ) : ( //middle k end of combo 1, begin combo 2                      //output columns:                                 (outRowsOdd) ? ( //for every other row                           //rows: every other row in current output alternate between c3/c4                                    oddOrEven = odd,                                    (outColumnsOdd) ? ctx.fillStyle= color3: ctx.fillStyle=color4//columns: odds c3 : evens c4                                ) : (//middle j                                               //rows:   next row                                    oddOrEven = even,                                    (outColumnsOdd) ? ctx.fillStyle=color4 : ctx.fillStyle=color3//columns: odds c4 : evens c3                                 ) //end j                                                   //rows:                            )//end k                                                        //output columns:                         ) : ( //middle l                                                    //output rows:                        //end output color alternation 1                            (k % 2) !=1 ? ( //if output y coord is odd (k) alternate output colorcombos (red/blue or green/yellow)                                (outRowsOdd) ? ( //for every other row                                    oddOrEven = odd,                                    (outColumnsOdd) ? ctx.fillStyle=color3 : ctx.fillStyle=color4//start alternating patter with color option 1                                ) : ( //middle j                                    oddOrEven = even,                                    //start alternating patter with color option 2                                    (outColumnsOdd) ? ctx.fillStyle=color4 : ctx.fillStyle=color3                                ) //end j                            ) : ( //middle k                                (outRowsOdd) !=1 ? ( //for every other row                                    oddOrEven = odd,                                    (outColumnsOdd) ? ctx.fillStyle= color1: ctx.fillStyle=color2//start alternating patter with color option 1                                ) : ( //middle j                                    oddOrEven = even,                                    //start alternating patter with color option 2                                    (outColumnsOdd) ? ctx.fillStyle=color2 : ctx.fillStyle=color1                                ) //end j                            )//end k                        )//end l                        ctx.fillRect(xStart,yStart,width,height); //draw single tile                        counter++;                                                //alert(yLimit +  , + xLimit);                        //draw alphanumeric coordinates                        if (drawCoords){ //check drawCoords checkbox. no check = no coords                            var alphaX = xStart;                            var alphaY = yStart;                            ctx.fillStyle=textcolor;                            if (+width < 35 || +height < 35){ //tile size check                                ctx.font = 8px Helvetica;                                alphaX = xStart+4;                                alphaY = yStart+15;                            } else if (+width < 54 || +height < 54){ //tile size check                                ctx.font = 10px Helvetica;                                alphaX = xStart+6;                                alphaY = yStart+15;                            } else if (+width < 64 || +height < 64){ //tile size check                                ctx.font = 14px Helvetica;                                alphaX = xStart+6;                                alphaY = yStart+20;                            } else if (+width < 110 || +height < 110){ //tile size check                                ctx.font = 24px Helvetica;                                alphaX = xStart+6;                                alphaY = yStart+30;                            } else {                                ctx.font = 30px Helvetica;                                alphaX = xStart+10;                                alphaY = yStart+40;                            }//end size check                            ctx.fillText(alphabet[xLimit].toUpperCase() + (yLimit+1),alphaX,alphaY); //draw alpha then number                        }                         //ARROW DIRECTION DETERMINATION                        //draw data flow (default for starting top left with horizontal rows.                         var arrow = downArr; //default direction                        switch (dataFlow){                            case 1://dataFlow=1                                //(j % 2) != 1 ? arrow = rightArr : arrow = leftArr; //even/odd row check                                i == columns-1 ? ( //last column of entire map                                    (outRowsOdd) ? arrow = downArr : //output row odd                                         (columns == (colsLimit*l)+1 && i == columns-1) ? //only 1 column of rightmost output?                                         arrow = downArr : arrow = leftArr//far right column + single : far right column part of bigger output                                ) : ( //everything but last column of entire map                                    (outRowsOdd) ?                                         (arrow = rightArr, xLimit == colsLimit-1 ? arrow = downArr : arrow = rightArr )//odd rows default to right, last column of output down, otherwise right.                                            : xLimit == 0 ? arrow = downArr /*even+left edge*/                                                : arrow = leftArr/*even*/                                );//far right edge check                                break;                            case 2://dataFlow=2                                i == columns-1 ? ( //last column of entire map                                    (outRowsOdd) ? arrow = downArr : //output row odd                                         (columns == (colsLimit*l)+1 && i == columns-1) ? //only 1 column of rightmost output?                                         arrow = downArr : arrow = downArr//far right column  + single : far right column part of bigger output                                ) : ( //everything but last column of entire map                                    (outRowsOdd) ?                                         (arrow = leftArr, xLimit == colsLimit-1 ? arrow = leftArr : arrow = leftArr )//odd rows default to right, last column of output down, otherwise right.                                            : xLimit == 0 ? arrow = downArr /*even+left edge*/                                                : arrow = rightArr/*even*/                                );//far right edge check                                            break;                        }                        //ARROW COLOR DETERMINATION                        if (drawData){ //check drawData checkbox. no check = no data path                            ctx.fillStyle=datacolor;                            if (dataFlow == 1){ //check which data case and tile being drawn to change first tile in data chain's arrow to green                                if (yLimit== 0 && xLimit== 0){ //if top left                                    ctx.fillStyle = dataStartColor;                                }                                 if (rowsOdd) {//if odd row                                    if (yLimit==rowsLimit-1 || j==rows-1){//if odd bottom of section or entire map                                        if(xLimit==colsLimit-1||xLimit==columns-1||i==columns-1){//if last column of section or entire map                                            arrow = stopSign;                                            }//end right edge check                                        else if (columns == colsLimit+1 && i == columns-1   ){//if theres only one column on next section                                            arrow = stopSign;                                           }//end check for single extra column                                         }//end bottom edge check                                } else {//if even row                                    if (yLimit==rowsLimit-1 || j==rows-1){//if even bottom of section or entire map                                        if (xLimit == 0 || i == 0){ //if first column of section or entire map                                            arrow = stopSign;                                           }//end left edge check                                    }//end bottom edge check                                }//end current row odd even check                            }  else {                            }                        if (+width < 35 || +height < 35){ //tile size check                            ctx.font = 8px Helvetica;                            ctx.fillText(arrow,xStart+20,yStart+10); //small                        } else if (+width < 54 || +height < 54){ //tile size check                            ctx.font = 10px Helvetica;                            ctx.fillText(arrow,xStart+25,yStart+15); //med                        } else if (+width < 64 || +height < 64){ //tile size check                            ctx.font = 14px Helvetica;                            ctx.fillText(arrow,xStart+30,yStart+20); //med                        } else if (+width < 110 || +height < 110){ //tile size check                            ctx.font = 24px Helvetica;                            ctx.fillText(arrow,xStart+40,yStart+30); //med                        } else {                            ctx.font = 30px Helvetica;                            ctx.fillText(arrow,xStart+80,yStart+40); //large                        }//end size check                        }//end of data draw check//                      #### Draw Info                        if (drawInfo) { //draw info tile if checkbox checkes                            function numberWithCommas(x) {                                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ,);                            }                            tileCount = (+columns * +rows);                                                     var hRes = (+width * +columns);                            var vRes = (+height * +rows);                            var tPix = (hRes*vRes);                            var info1 = Total Resolution : +hRes+ x +vRes+. Total tiles :  +tileCount+ . (+numberWithCommas(tPix)+) pixels;                            var info2 = Single Tile Resolution : +width+ x +height;                            var info3 = Maximum Output Resolution : +resWidthLimit+ x +resHeightLimit+. Max tiles per output : +(colsLimit*rowsLimit)+ tiles.;                            var info4 = Required Outputs : +outputsWide*outputsHigh;                            var info5 =;                            if (drawUser){                                var info5 = $('#userText').val();                            }                            var rectHeight = 200;                            var rectWidth = 600;                            var rectX = leftMarg;                            var rectY = topMarg;                            var topMarg = (vRes/2)-(rectHeight/2);                            var leftMarg = (hRes/2)-(rectWidth/2);                            ctx.fillStyle =infoBackgroundColor;                            ctx.fillRect(leftMarg,topMarg,rectWidth,rectHeight);                            ctx.fillStyle=infoForegroundColor;                            ctx.font = 12px Lucida Console;                            ctx.textAlign=center;                             ctx.font = 14px Lucida Console;                            ctx.fillText(info5,rectX+(rectWidth/2),rectY+(rectHeight/2)-14);                            ctx.font = 12px Lucida Console;                            rectY = rectY+14;//new line                            ctx.fillText(info1,rectX+(rectWidth/2),rectY+(rectHeight/2)-12);                            rectY = rectY+14;//new line                            ctx.fillText(info3,rectX+(rectWidth/2),rectY+(rectHeight/2)-12);                            rectY = rectY+14;//new line                            ctx.fillText(info2,rectX+(rectWidth/2),rectY+(rectHeight/2)-12);                            rectY = rectY+14;//new line                            ctx.fillText(info4,rectX+(rectWidth/2),rectY+(rectHeight/2)-12);                            ctx.textAlign=left;//reset text alignment for tile coords                        }                        console.log(################################);                        console.log(#      Begin Drawing Tile  + alphabet[xLimit] + (+yLimit+1));                        console.log(#  Tile Unique #  + counter + , First Pixel (top-left) : ( + xStart + ,  + yStart + ));                        console.log(#  Odd or Even :  + oddOrEven);                        console.log(#  xLimit is :  + xLimit);                        console.log(#  yLimit is :  + yLimit);                        console.log(#  Tile Coords (x, y) (i, j) : ( + i + ,  + j +));                        console.log(#  Columns :  + columns);                            console.log(#  Rows :  + rows);                        console.log(#  rowsLimit is :  + rowsLimit);                        console.log(#  colsLimit is :  + colsLimit);                        console.log(#  Output Coords (x, y) : ( + (l+1) + ,  + (k+1) + ));                        console.log(#  Outputs high :  + outputsHigh);                            console.log(#  Outputs wide :  + outputsWide);                        console.log(#  Total Outputs Needed :  + outputsHigh*outputsWide);                        console.log(#  Top Edge :  + topEdge);                        console.log(#  Bottome Edge :  + bottomEdge);                        console.log(#  Left Edge :  + leftEdge);                        console.log(#  Right Edge :  + rightEdge);                        console.log(#  yLimit is :  + yLimit);                        console.log(#  Output Top Edge :  + outTopEdge);                        console.log(#  Output Bottom Edge :  + outBottomEdge);                        console.log(#  Output Left Edge :  + outLeftEdge);                        console.log(#  Output Right Edge :  + outRightEdge);                        console.log(#  Map Column is Odd? :  + columnsOdd);                        console.log(#  Map Row is Odd? :  + rowsOdd);                        console.log(#  Output Column is Odd? :  + outColumnsOdd);                        console.log(#  Output Row is Odd? :  + outRowsOdd);                        xStart = +xStart + +width; //shift starting coords for next column                    }//end columns for                    xStart = +colsLimit*l * +width;  //reset x coord to left most side of current output for next row                    yStart = +yStart + +height;  //shift starting coords for next row                }//end rows for            }//end outputs high check(k)        }//end outputs wide check(l)    }//end tilesByOutput    //jQuery    $('.pixelPerfButton').click(function(){        var $this = $(this);        $this.toggleClass('btn-danger').toggleClass('btn-primary');        $('#canvas').toggleClass('pixelPerf');        if($this.hasClass('btn-danger')){            $this.text('Pixel Perfect Preview : On');                   } else {            $this.text('Pixel Perfect Preview : Off');        }    });    $('ul#tilePresets li').click(function(){        var $this = $(this);        var preWidth= $this.text().substr(0, $this.text().indexOf('x'));         var preHeight= $this.text().substr($this.text().indexOf(x) + 1);         $('#width').val(preWidth);        $('#height').val(preHeight);        });    $('ul#outputPresets li').click(function(){        var $this = $(this);        var preResWidth= $this.text().substr(0, $this.text().indexOf('x'));         var preResHeight= $this.text().substr($this.text().indexOf(x) + 1);         $('#resWidthLimit').val(preResWidth);        $('#resHeightLimit').val(preResHeight);        });    //col slider    $('#colSlide').slider({            tooltip: 'show',            min: 1,            max: 120,            value: $('#columns').val()        });    var originalVal;    $('#colSlide').slider().on('slideStart', function(ev){        originalVal = $('#colSlide').data('slider').getValue();    });    $('#colSlide').slider().on('slideStop', function(ev){        var newVal = $('#colSlide').data('slider').getValue();        if(originalVal != newVal) {            $('#columns').val($(this).val());        }        columns=$('#columns').val(); //.value converts input field int to string***        outputsWide = Math.ceil(columns/colsLimit);          draw();    });    //row slider    $('#rowSlide').slider({            tooltip: 'show',            min: 1,            max: 60,            value: $('#rows').val()        });    var originalVal2;    $('#rowSlide').slider().on('slideStart', function(ev){        originalVal2 = $('#rowSlide').data('slider').getValue();    });    $('#rowSlide').slider().on('slideStop', function(ev){        var newVal = $('#rowSlide').data('slider').getValue();        if(originalVal2 != newVal) {            $('#rows').val($(this).val());        }        rows=$('#rows').val(); //.value converts input field int to string***        outputsHigh = Math.ceil(rows/rowsLimit);         draw();    });});//main functionJS Fiddle link : http://jsfiddle.net/ganLf56k/
Navigating HTML5 canvas checkerboard with nested loops / multi-dimensional arrays
javascript;jquery;canvas