@tolokoban/tgd
Version:
ToloGameDev library for WebGL2
83 lines • 6.85 kB
JavaScript
/**
* 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 = fillColor;
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++) {
gradient.addColorStop(colorIndex / (colors.length - 1), colors[colorIndex]);
}
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);
return canvas;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FudmFzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL2NhbnZhcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sVUFBVSxlQUFlLENBQzNCLEtBQWEsRUFDYixNQUFjO0lBRWQsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQTtJQUMvQyxNQUFNLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQTtJQUNwQixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtJQUN0QixPQUFPLE1BQU0sQ0FBQTtBQUNqQixDQUFDO0FBRUQ7OztHQUdHO0FBQ0gsTUFBTSxVQUFVLDRCQUE0QixDQUN4QyxLQUFhLEVBQ2IsTUFBYyxFQUNkLFFBQTJDO0lBRTNDLE1BQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUE7SUFDL0MsTUFBTSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7SUFDcEIsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUE7SUFDdEIsTUFBTSxPQUFPLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUE7SUFDakQsSUFBSSxDQUFDLE9BQU87UUFBRSxNQUFNLElBQUksS0FBSyxDQUFDLDhCQUE4QixDQUFDLENBQUE7SUFFN0QsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLENBQUE7QUFDbkMsQ0FBQztBQUVEOzs7Ozs7Ozs7Ozs7Ozs7R0FlRztBQUNILE1BQU0sVUFBVSxzQkFBc0IsQ0FBQyxNQUFnQixFQUFFLE1BQU0sR0FBRyxDQUFDLEVBQUUsSUFBSSxHQUFHLENBQUM7SUFDekUsTUFBTSxLQUFLLEdBQUcsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFBO0lBQ2pE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