nonogram drawing

by Ben Gillbanks

HTML

<canvas id="nonogramCanvas" width="450" height="450"></canvas>
    <button id="generate">Generate Clues</button>
    <div class="puzzle"></div>

CSS

canvas {
            border: 1px solid #000;
        }

JavaScript

function PixelArtApp(canvasId) {
    // Initialize the PixelArtApp with the provided canvas ID
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.gridSize = 15;
    this.cellSize = this.canvas.width / this.gridSize;
    this.gridColor = '#eee';
    this.grid = [];
    this.isDrawing = false;
    this.currentColor = 0; // 0 for white, 1 for black

    // Initialize the grid with zeros
    this.initializeGrid = function () {
        for (let i = 0; i < this.gridSize; i++) {
            this.grid.push(Array(this.gridSize).fill(0));
        }
    };

    // Draw the overlay grid
    this.drawOverlayGrid = function () {
        this.ctx.strokeStyle = this.gridColor;
        this.ctx.lineWidth = 1;

        for (let i = 0; i <= this.gridSize; i++) {
            const pos = i * this.cellSize;

            // Draw vertical lines
            this.ctx.beginPath();
            this.ctx.moveTo(pos, 0);
            this.ctx.lineTo(pos, this.canvas.height);
            this.ctx.stroke();

            // Draw horizontal lines
            this.ctx.beginPath();
            this.ctx.moveTo(0, pos);
            this.ctx.lineTo(this.canvas.width, pos);
            this.ctx.stroke();
        }
    };

    // Draw the entire grid
    this.draw = function () {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        for (let i = 0; i < this.gridSize; i++) {
            for (let j = 0; j < this.gridSize; j++) {
                if (this.grid[i][j] === 1) {
                    this.ctx.fillStyle = 'black';
                    this.ctx.fillRect(j * this.cellSize, i * this.cellSize, this.cellSize, this.cellSize);
                }
            }
        }

        this.drawOverlayGrid();
    };

    // Handle mouse down event
    this.handleMouseDown = function (event) {
        this.isDrawing = true;
        this.currentColor = 1 - this.grid[this.getCellY(event)][this.getCellX(event)];
       ...