@woosh/meep-engine/src/engine/graphics/texture/sampler/util/drawSamplerHTML.js

Pure JavaScript game engine. Fully featured and production ready.

import {
    typedArrayConstructorByInstance
} from "../../../../../core/collection/array/typed/typedArrayConstructorByInstance.js";
import { sampler2d_scale } from "../resize/sampler2d_scale.js";
import { Sampler2D } from "../Sampler2D.js";
import sampler2d_to_html_canvas from "../sampler2d_to_html_canvas.js";

/**
 *
 * @param {HTMLElement} parentNode
 * @param {Sampler2D} sampler
 * @param {number} x
 * @param {number} y
 * @param {number} scale
 * @param {number} offset
 * @param {number} size
 */
export function drawSamplerHTML(parentNode, sampler, x, y, scale, offset, size) {


    const TA = typedArrayConstructorByInstance(sampler.data);


    let target_width = size;
    let target_height = size;

    // apply aspect ratio
    if (sampler.width > sampler.height) {
        target_height = Math.ceil(size * (sampler.height / sampler.width));
    } else if (sampler.width < sampler.height) {
        target_width = Math.ceil(size * (sampler.width / sampler.height));
    }

    const target = new Sampler2D(new TA(target_width * target_height * sampler.itemSize), sampler.itemSize, target_width, target_height);

    sampler2d_scale(sampler, target);

    const c = sampler2d_to_html_canvas(target, scale, offset);
    c.style.zIndex = 1000;
    c.style.position = "absolute";
    c.style.left = `${x}px`;
    c.style.top = `${y}px`;

    parentNode.appendChild(c);
}