@woosh/meep-engine/src/engine/graphics/canvas/canvas2d_draw_grid.js

Pure JavaScript game engine. Fully featured and production ready.

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {number} width
 * @param {number} height
 * @param {string} [color] CSS color specification
 * @param {number} [spacing] distance between grid lines
 * @param {number} [offset_x]
 * @param {number} [offset_y]
 * @param {number} [thickness] Like thickness
 */
export function canvas2d_draw_grid({
                                       ctx,
                                       width,
                                       height,
                                       color = 'red',
                                       spacing = 10,
                                       offset_x = 0,
                                       offset_y = 0,
                                       thickness = 1
                                   }) {
    ctx.fillStyle = 'none';
    ctx.lineWidth = thickness;
    ctx.strokeStyle = color;


    ctx.beginPath();

    for (let x = offset_x; x < width; x += spacing) {
        // horizontal
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
    }

    for (let y = offset_y; y < height; y += spacing) {
        // vertical
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
    }

    ctx.stroke();
}