@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
86 lines • 7.37 kB
JavaScript
import { isString } from "./../types/guards.js";
/**
* Helper to get a canvas with the given size.
*/
export function tgdCanvasCreate(width, height) {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
return canvas;
}
/**
* Helper to get a canvas of the given size and a 2D context on it.
* If this is not possible, the method will throw an exception.
*/
export function tgdCanvasCreateWithContext2D(width, height, settings) {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d", settings);
if (!context)
throw new Error("Unable to create 2D context!");
return { canvas, ctx: context };
}
/**
* A palette is an image with a different (or not) color for each pixel.
* It can be used in a texture with NEAREST filter, for instance.
* @param colors CSS colors of each pixel
* @param colums If not defined, the canvas will have a size of (colors.length, 1).
* But if `colums` is defined, it will be the width of the vanva and the height will
* be computed to hold all the colors.
* If there are more pixels in the canvas that colors, we just wrap around the colors
* array.
* @param rows If defined, it will be the height of the canvas.
* @example
* ```
* // Create a 5x5 checkboard.
* const canvas = tgdCanvasCreatePalette(["#000", "#fff"], 5, 5)
* ```
*/
export function tgdCanvasCreatePalette(colors, colums = 0, rows = 0) {
const width = colums > 0 ? colums : colors.length;
const height = rows > 0 ? rows : Math.ceil(colors.length / width);
const { canvas, ctx } = tgdCanvasCreateWithContext2D(width, height);
let colorIndex = 0;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
ctx.fillStyle = colors[colorIndex % colors.length];
ctx.fillRect(x, y, 1, 1);
colorIndex++;
}
}
return canvas;
}
export function tgdCanvasCreateFill(width, height, fillColor = "#000") {
const { canvas, ctx } = tgdCanvasCreateWithContext2D(width, height);
ctx.fillStyle = isString(fillColor) ? fillColor : fillColor.toString();
ctx.fillRect(0, 0, width, height);
return canvas;
}
export function tgdCanvasCreateGradientHorizontal(size, colors) {
return tgdCanvasCreateGradient(size, 1, 1, 0, colors);
}
export function tgdCanvasCreateCreateGradientvertical(size, colors) {
return tgdCanvasCreateGradient(1, size, 0, 1, colors);
}
/**
* Create a canvas with a linear gradient.
* @param width Width of the resulting canvas.
* @param height Height of the resulting canvas.
* @param directionX X coord of the direction vector.
* @param directionY Y coord of the direction vector.
* @param colors CSS colors of each step
*/
export function tgdCanvasCreateGradient(width, height, directionX, directionY, colors) {
const { canvas, ctx } = tgdCanvasCreateWithContext2D(width, height);
const gradient = ctx.createLinearGradient(0, 0, width * directionX, height * directionY);
for (let colorIndex = 0; colorIndex < colors.length; colorIndex++) {
const color = colors[colorIndex];
const cssColor = isString(color) ? color : color.toString();
gradient.addColorStop(colorIndex / (colors.length - 1), cssColor);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
return canvas;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL2NhbnZhcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFNUM7O0dBRUc7QUFDSCxNQUFNLFVBQVUsZUFBZSxDQUMzQixLQUFhLEVBQ2IsTUFBYztJQUVkLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUE7SUFDL0MsTUFBTSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7SUFDcEIsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7SUFDdEIsT0FBTyxNQUFNLENBQUE7QUFDakIsQ0FBQztBQUVEOzs7R0FHRztBQUNILE1BQU0sVUFBVSw0QkFBNEIsQ0FDeEMsS0FBYSxFQUNiLE1BQWMsRUFDZCxRQUEyQztJQUUzQyxNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFBO0lBQy9DLE1BQU0sQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO0lBQ3BCLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO0lBQ3RCLE1BQU0sT0FBTyxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxDQUFBO0lBQ2pELElBQUksQ0FBQyxPQUFPO1FBQUUsTUFBTSxJQUFJLEtBQUssQ0FBQyw4QkFBOEIsQ0FBQyxDQUFBO0lBRTdELE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLE9BQU8sRUFBRSxDQUFBO0FBQ25DLENBQUM7QUFFRDs7Ozs7Ozs7Ozs7Ozs7O0dBZUc7QUFDSCxNQUFNLFVBQVUsc0JBQXNCLENBQUMsTUFBZ0IsRUFBRSxNQUFNLEdBQUcsQ0FBQyxFQUFFLElBQUksR0FBRyxDQUFDO0lBQ3pFLE1BQU0sS0FBSyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1B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