CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Bruno da Cruz
Bruno da Cruz

Reputation: 83

Bug in my grid maker

I've create a grid maker using canvas, so far I have this: 

<-- HTML -->
<body>
    <canvas id="tileMap"></canvas>
    <form action="#">
        <input type="range" max=5 min=1 name="numberOfTilesInLineAndColunm" id="numberOfTilesInLineAndColunm">
    <script src="js.js"></script>
    </form>
</body>

<-- JAVASCRIPT -->

window.onload = function() { 

    var grid  = new Grid();

    var input = document.getElementById('numberOfTilesInLineAndColunm');

    canvas  = document.getElementById("tileMap");
    context = canvas.getContext("2d");

    canvas.width  = 300;
    canvas.height = canvas.width;

    //printGrid(grid.getGridBeginning(), grid.getGridSize(), grid.getTileSize());

    input.addEventListener('change', function() {

        grid.setNumberOfTilesInLineAndColunm();

        grid.setGridSize();

        printGrid(grid.getGridBeginning(), grid.getGridSize(), grid.getTileSize());

    });
}

var canvas;
var context;

function Grid() {

    var gridBeginning                = 0; 
    var tileSize                     = 32;
    var numberOfTilesInLineAndColunm = document.getElementById('numberOfTilesInLineAndColunm').value;
    var gridSize                     = (numberOfTilesInLineAndColunm * tileSize);
    var width                        = 0;
    var height                       = 0;

    this.getNumberOfTilesInLineAndColunm = function() {
        return numberOfTilesInLineAndColunm;
    }

    this.setNumberOfTilesInLineAndColunm = function() {
        numberOfTilesInLineAndColunm = document.getElementById('numberOfTilesInLineAndColunm').value;
    }

    this.getGridBeginning = function() {
        return gridBeginning;
    }

    this.getTileSize = function() {
        return tileSize;
    }

    this.getGridSize = function() {
        return gridSize;
    }

    this.setGridSize = function() {
        gridSize = (numberOfTilesInLineAndColunm * tileSize);
    }
}

function printGrid(beginning, gridSize, squareSize) {

  context.clearRect(0, 0, canvas.width, canvas.height);

  for (beginning; beginning <= gridSize; beginning += squareSize) {

    // printing the horizontal lines
    context.moveTo(beginning, 0);
    context.lineTo(beginning, gridSize);
    context.stroke();

    // printing the vertical lines
    context.moveTo(0, beginning);
    context.lineTo(gridSize, beginning);
    context.stroke();

  }

}

it's working fine when I increase the number of tiles in the grid but when I decrease it doesn't change anything.

here's the jsfiddle: http://jsfiddle.net/p54emnmg/

I'm asking your help to debug this thing cos so far I really do not know where is the mistake.

Upvotes: 0

Views: 50

Answers (1)

markE
markE

Reputation: 105015

You must do context.beginPath() in your printGrid function.

beginPath declares that you are starting a new set of path drawing commands (like moveTo,lineTo).

Without beginPath, every previous drawing command is redrawn every time you call context.stroke.

That means your larger grid is always drawn which masks your desired smaller grid.

function printGrid(beginning, gridSize, squareSize) {

    context.clearRect(0, 0, canvas.width, canvas.height);

    // do context.beginPath();
    // This starts a new path
    // Without it, every previous drawing command is redrawn
    context.beginPath();

    for (beginning; beginning <= gridSize; beginning += squareSize) {

        // printing the horizontal lines
        context.moveTo(beginning, 0);
        context.lineTo(beginning, gridSize);
        context.stroke();

        // printing the vertical lines
        context.moveTo(0, beginning);
        context.lineTo(gridSize, beginning);
        context.stroke();

    }

}

Upvotes: 2

Related Questions