48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
/**
|
|
* Canvas component creation
|
|
*/
|
|
|
|
/**
|
|
* Create and configure the canvas element
|
|
* @param {Object} state - Editor state
|
|
* @returns {{canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D}} Canvas element and context
|
|
*/
|
|
export function createCanvas(state) {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = state.canvasWidth;
|
|
canvas.height = state.canvasHeight;
|
|
canvas.style.border = "1px solid var(--border-color)";
|
|
canvas.style.backgroundColor = "#1a1a1a";
|
|
canvas.style.cursor = "crosshair";
|
|
// Don't use flex on canvas - let updateCanvasScale handle sizing
|
|
canvas.style.display = "block"; // Remove inline spacing
|
|
canvas.tabIndex = 0;
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
return { canvas, ctx };
|
|
}
|
|
|
|
/**
|
|
* Resize canvas to match image dimensions
|
|
* @param {HTMLCanvasElement} canvas - Canvas element
|
|
* @param {Object} state - Editor state
|
|
* @param {HTMLImageElement} img - Image to match
|
|
* @param {Function} updateCanvasLayoutFn - Function to update canvas layout
|
|
*/
|
|
export function resizeCanvasToImage(canvas, state, img, updateCanvasLayoutFn) {
|
|
if (!img || !img.width || !img.height) return;
|
|
const maxSize = 2048;
|
|
const width = Math.min(maxSize, img.width);
|
|
const height = Math.min(maxSize, img.height);
|
|
if (canvas.width !== width || canvas.height !== height) {
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
state.canvasWidth = width;
|
|
state.canvasHeight = height;
|
|
if (updateCanvasLayoutFn) {
|
|
updateCanvasLayoutFn();
|
|
}
|
|
}
|
|
}
|