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

Pure JavaScript game engine. Fully featured and production ready.

/**
 *
 * @param {number[]} vertices
 * @param {CanvasRenderingContext2D} ctx
 * @param [fillColor]
 * @param [strokeColor]
 * @param [highlight_vertices]
 * @param [vertex_draw_size]
 * @param {number} [offset] in pixels
 */
export function canvas2d_draw_path({
                                       vertices,
                                       ctx,
                                       fillColor = 'transparent',
                                       strokeColor = 'red',
                                       highlight_vertices = true,
                                       vertex_draw_size = 8,
                                       offset = [0, 0]
                                   }) {

    function draw_point(x, y) {
        ctx.fillStyle = 'rgba(255,255,255,0.8)';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = "1px";

        const x1 = x - vertex_draw_size / 2 + offset[0];
        const y1 = y - vertex_draw_size / 2 + offset[1];

        ctx.fillRect(x1, y1, vertex_draw_size, vertex_draw_size);

        ctx.strokeRect(x1, y1, vertex_draw_size, vertex_draw_size);
    }

    if (highlight_vertices) {
        for (let i = 0; i < vertices.length / 2; i++) {
            draw_point(vertices[i * 2], vertices[i * 2 + 1]);
        }
    }

    ctx.fillStyle = fillColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = "1px";

    ctx.beginPath();

    ctx.moveTo(vertices[0] + offset[0], vertices[1] + offset[1]);
    // drawPoint(jarvis_vertices[0].x, jarvis_vertices[0].y, jarvis_vertices[0].z, 'red');

    for (let i = 1; i < vertices.length / 2; i++) {

        ctx.lineTo(vertices[i * 2] + offset[0], vertices[i * 2 + 1] + offset[1]);

        // drawPoint(last.x, last.y, last.z, 'red');
    }

    ctx.closePath();
    ctx.stroke();
    ctx.fill();

}