public/js-roguelike-skeleton/src/renderer.js
function(x, y, tileData, ctx) {
            ctx = ctx || this.bufferCtx;

            var originalX = x,
                originalY = y;

            x -= this.originX;
            y -= this.originY;

            if(tileData.bgColor){
                ctx.fillStyle = tileData.bgColor;
                ctx.fillRect(
                    x * this.tileSize,
                    y * this.tileSize,
                    this.tileSize,
                    this.tileSize
                );
            }

            if(tileData.before !== void 0){
                this.drawTileToCanvas(originalX, originalY, tileData.before, ctx);
            }

            if(tileData.char && tileData.color){

                if(tileData.mask){
                    ctx.save();
                    ctx.beginPath();
                    ctx.rect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize,
                        this.tileSize
                    );
                    ctx.clip();
                    ctx.closePath();
                }

                var fontSize = tileData.fontSize || this.tileSize;
                var textX = x * (this.tileSize) + (this.tileSize * 0.5) + (tileData.offsetX || 0);
                var textY = y * (this.tileSize) + (this.tileSize * 0.5) + (tileData.offsetY || 0);

                ctx.fillStyle = tileData.color;
                ctx.textAlign = tileData.textAlign || 'center';
                ctx.textBaseline = tileData.textBaseline || 'middle';

                ctx.font = fontSize + 'px ' + (tileData.font || this.font);
                if(tileData.charStrokeColor){
                    ctx.strokeStyle = tileData.charStrokeColor;
                    ctx.lineWidth = tileData.charStrokeWidth || 1;
                    ctx.strokeText(
                        tileData.char,
                        textX,
                        textY
                    );
                    ctx.strokeText(
                        tileData.char,
                        textX,
                        textY+1
                    );
                }

                ctx.fillText(
                    tileData.char,
                    textX,
                    textY
                );

                if(tileData.mask){
                    ctx.restore();
                }

            }

            if(tileData.after !== void 0){
                this.drawTileToCanvas(originalX, originalY, tileData.after, ctx);
            }

            if(tileData.borderColor){
                var borderWidth = tileData.borderWidth || 1;
                var borderOffset = Math.floor(borderWidth * 0.5);
                var borderRectSize = this.tileSize - borderWidth;
                if(borderWidth % 2 !== 0){
                    borderOffset += 0.5;
                }
                ctx.lineWidth = borderWidth;
                ctx.strokeStyle = tileData.borderColor;

                var bx = x * this.tileSize + borderOffset;
                var by = y * this.tileSize + borderOffset;
                ctx.strokeRect(bx, by, borderRectSize, borderRectSize);
            }
        }
function(x, y, tileData, ctx) {
            ctx = ctx || this.bufferCtx;

            var originalX = x,
                originalY = y;

            x -= this.originX;
            y -= this.originY;

            if(tileData.bgColor){
                ctx.fillStyle = tileData.bgColor;
                ctx.fillRect(
                    x * this.tileSize,
                    y * this.tileSize,
                    this.tileSize,
                    this.tileSize
                );
            }

            if(tileData.before !== void 0){
                this.drawTileToCanvas(originalX, originalY, tileData.before, ctx);
            }

            if(tileData.char && tileData.color){

                if(tileData.mask){
                    ctx.save();
                    ctx.beginPath();
                    ctx.rect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize,
                        this.tileSize
                    );
                    ctx.clip();
                    ctx.closePath();
                }

                var fontSize = tileData.fontSize || this.tileSize;
                var textX = x * (this.tileSize) + (this.tileSize * 0.5) + (tileData.offsetX || 0);
                var textY = y * (this.tileSize) + (this.tileSize * 0.5) + (tileData.offsetY || 0);

                ctx.fillStyle = tileData.color;
                ctx.textAlign = tileData.textAlign || 'center';
                ctx.textBaseline = tileData.textBaseline || 'middle';

                ctx.font = fontSize + 'px ' + (tileData.font || this.font);
                if(tileData.charStrokeColor){
                    ctx.strokeStyle = tileData.charStrokeColor;
                    ctx.lineWidth = tileData.charStrokeWidth || 1;
                    ctx.strokeText(
                        tileData.char,
                        textX,
                        textY
                    );
                    ctx.strokeText(
                        tileData.char,
                        textX,
                        textY+1
                    );
                }

                ctx.fillText(
                    tileData.char,
                    textX,
                    textY
                );

                if(tileData.mask){
                    ctx.restore();
                }

            }

            if(tileData.after !== void 0){
                this.drawTileToCanvas(originalX, originalY, tileData.after, ctx);
            }

            if(tileData.borderColor){
                var borderWidth = tileData.borderWidth || 1;
                var borderOffset = Math.floor(borderWidth * 0.5);
                var borderRectSize = this.tileSize - borderWidth;
                if(borderWidth % 2 !== 0){
                    borderOffset += 0.5;
                }
                ctx.lineWidth = borderWidth;
                ctx.strokeStyle = tileData.borderColor;

                var bx = x * this.tileSize + borderOffset;
                var by = y * this.tileSize + borderOffset;
                ctx.strokeRect(bx, by, borderRectSize, borderRectSize);
            }
        }
function ( x , y , tileData , ctx ) { ctx = ctx || this . bufferCtx ; var originalX = x , originalY = y ; x -= this . originX ; y -= this . originY ; if ( tileData . bgColor ) { ctx . fillStyle = tileData . bgColor ; ctx . fillRect ( x * this . tileSize , y * this . tileSize , this . tileSize , this . tileSize ) ; } if ( tileData . before !== void 0 ) { this . drawTileToCanvas ( originalX , originalY , tileData . before , ctx ) ; } if ( tileData . char && tileData . color ) { if ( tileData . mask ) { ctx . save ( ) ; ctx . beginPath ( ) ; ctx . rect ( x * this . tileSize , y * this . tileSize , this . tileSize , this . tileSize ) ; ctx . clip ( ) ; ctx . closePath ( ) ; } var fontSize = tileData . fontSize || this . tileSize ; var textX = x * ( this . tileSize ) + ( this . tileSize * 0.5 ) + ( tileData . offsetX || 0 ) ; var textY = y * ( this . tileSize ) + ( this . tileSize * 0.5 ) + ( tileData . offsetY || 0 ) ; ctx . fillStyle = tileData . color ; ctx . textAlign = tileData . textAlign || 'center' ; ctx . textBaseline = tileData . textBaseline || 'middle' ; ctx . font = fontSize + 'px ' + ( tileData . font || this . font ) ; if ( tileData . charStrokeColor ) { ctx . strokeStyle = tileData . charStrokeColor ; ctx . lineWidth = tileData . charStrokeWidth || 1 ; ctx . strokeText ( tileData . char , textX , textY ) ; ctx . strokeText ( tileData . char , textX , textY + 1 ) ; } ctx . fillText ( tileData . char , textX , textY ) ; if ( tileData . mask ) { ctx . restore ( ) ; } } if ( tileData . after !== void 0 ) { this . drawTileToCanvas ( originalX , originalY , tileData . after , ctx ) ; } if ( tileData . borderColor ) { var borderWidth = tileData . borderWidth || 1 ; var borderOffset = Math . floor ( borderWidth * 0.5 ) ; var borderRectSize = this . tileSize - borderWidth ; if ( borderWidth % 2 !== 0 ) { borderOffset += 0.5 ; } ctx . lineWidth = borderWidth ; ctx . strokeStyle = tileData . borderColor ; var bx = x * this . tileSize + borderOffset ; var by = y * this . tileSize + borderOffset ; ctx . strokeRect ( bx , by , borderRectSize , borderRectSize ) ; } }
Draws a single tile to the map view.
@method drawTileToCanvas
@param {Number} x - Map tile coord on the x axis.
@param {Number} y - Map tile coord on the y axis.
@param {Object} tileData - Object containing tile draw settings.
@param {Object} [tileData.char] - The character to draw.
@param {Object} [tileData.color] - The color of the character displayed.
@param {Object} [tileData.bgColor] - The background color of the tile.
@param {Object} [tileData.borderColor] - The border color of the tile.
@param {Object} [tileData.borderWidth=1] - The border width of the tile.
@param {CanvasRenderingContext2D} [ctx=this.bufferCtx] - The canvas context to draw to.
Draws a single tile to the map view .