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

Pure JavaScript game engine. Fully featured and production ready.

import Vector2 from "../../../core/geom/Vector2.js";
import { canvas2d_draw_grid } from "./canvas2d_draw_grid.js";
import { canvas2d_draw_linear_scale } from "./canvas2d_draw_linear_scale.js";
import { canvas2d_plot_line_array } from "./canvas2d_plot_line_array.js";

/**
 *
 * @param {CanvasRenderingContext2D} ctx
 * @param {number[]|Float32Array} data
 * @param {Vector2} [margin]
 * @param {number} width
 * @param {number} height
 * @param {number[]} [range_y]
 * @param {number[]} range_x
 */
export function canvas2d_plot_data_line({
                                            ctx,
                                            data,
                                            margin = Vector2.zero,
                                            width,
                                            height,
                                            range_y,
                                            range_x
                                        }) {

    ctx.fillStyle = '#222222';
    ctx.fillRect(0, 0, width, height);

    const data_x0 = range_x[0];
    const data_x1 = range_x[1];
    const data_y0 = range_y[0];
    const data_y1 = range_y[1];

    const plot_area_width = width - margin.x * 2;
    const plot_area_height = height - margin.y * 2;

    canvas2d_draw_grid({
        ctx,
        width,
        height,
        color: '#262626',
        spacing: 32,
        offset_x: 0
    });

    canvas2d_draw_grid({
        ctx,
        width,
        height,
        color: '#303030',
        spacing: 32,
        offset_x: 16,
        offset_y: 16
    });

    canvas2d_draw_linear_scale({
        ctx,
        position_x0: margin.x,
        position_x1: width - margin.x,
        position_y0: height - 4,
        position_y1: height - 4,
        value_0: data_x0,
        value_1: data_x1,
        spacing: 64
    });
    canvas2d_draw_linear_scale({
        ctx,
        position_x0: 4,
        position_x1: 4,
        position_y0: height - margin.y,
        position_y1: margin.y,
        value_0: data_y0,
        value_1: data_y1,
        spacing: 64
    });

    ctx.fillStyle = 'none';
    ctx.strokeStyle = '#00ff00';
    ctx.lineWidth = 1;
    canvas2d_plot_line_array(
        ctx, plot_area_width, plot_area_height, margin.x, margin.y, data, range_y
    );

}