fix: canvas flickering due to resetting canvas on skipped frames (#6960)

This commit is contained in:
David Luzar 2023-09-05 12:06:48 +02:00 committed by GitHub
parent 188921c247
commit 27fd150a20
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -37,10 +37,25 @@ const StaticCanvas = (props: StaticCanvasProps) => {
canvas.classList.add("excalidraw__canvas", "static"); canvas.classList.add("excalidraw__canvas", "static");
} }
canvas.style.width = `${props.appState.width}px`; const widthString = `${props.appState.width}px`;
canvas.style.height = `${props.appState.height}px`; const heightString = `${props.appState.height}px`;
canvas.width = props.appState.width * props.scale; if (canvas.style.width !== widthString) {
canvas.height = props.appState.height * props.scale; canvas.style.width = widthString;
}
if (canvas.style.height !== heightString) {
canvas.style.height = heightString;
}
const scaledWidth = props.appState.width * props.scale;
const scaledHeight = props.appState.height * props.scale;
// setting width/height resets the canvas even if dimensions not changed,
// which would cause flicker when we skip frame (due to throttling)
if (canvas.width !== scaledWidth) {
canvas.width = scaledWidth;
}
if (canvas.height !== scaledHeight) {
canvas.height = scaledHeight;
}
renderStaticScene( renderStaticScene(
{ {