@meframe/core
Version:
Next generation media processing framework based on WebCodecs
59 lines (58 loc) • 1.89 kB
JavaScript
function setupCanvasDPI(canvas, displayWidth, displayHeight) {
const dpr = window.devicePixelRatio || 1;
canvas.width = Math.round(displayWidth * dpr);
canvas.height = Math.round(displayHeight * dpr);
canvas.style.width = `${displayWidth}px`;
canvas.style.height = `${displayHeight}px`;
return {
width: canvas.width,
height: canvas.height
};
}
function createHiDPICanvas(container, options = { displayWidth: 540, displayHeight: 960 }) {
const canvas = document.createElement("canvas");
if (options.id) {
canvas.id = options.id;
}
if (options.className) {
canvas.className = options.className;
}
const dimensions = setupCanvasDPI(canvas, options.displayWidth, options.displayHeight);
if (container) {
container.appendChild(canvas);
}
return { canvas, dimensions };
}
function checkCanvasDPI(canvas) {
const dpr = window.devicePixelRatio || 1;
const displayWidth = canvas.clientWidth;
const displayHeight = canvas.clientHeight;
const expectedWidth = Math.round(displayWidth * dpr);
const expectedHeight = Math.round(displayHeight * dpr);
const widthMatch = Math.abs(canvas.width - expectedWidth) <= 1;
const heightMatch = Math.abs(canvas.height - expectedHeight) <= 1;
const isOptimal = widthMatch && heightMatch;
let message = "";
if (!isOptimal) {
message = `Canvas DPI mismatch! Expected ${expectedWidth}×${expectedHeight} but got ${canvas.width}×${canvas.height}. This will cause blurry rendering on ${dpr}x DPI screens.`;
} else {
message = `Canvas DPI is properly configured for ${dpr}x display.`;
}
return {
dpr,
canvasWidth: canvas.width,
canvasHeight: canvas.height,
displayWidth,
displayHeight,
expectedWidth,
expectedHeight,
isOptimal,
message
};
}
export {
checkCanvasDPI,
createHiDPICanvas,
setupCanvasDPI
};
//# sourceMappingURL=canvas-utils.js.map