diff --git a/src/shared/initial-app/Intro/blob-anim/index.ts b/src/shared/initial-app/Intro/blob-anim/index.ts index 116eca79..934f1e70 100644 --- a/src/shared/initial-app/Intro/blob-anim/index.ts +++ b/src/shared/initial-app/Intro/blob-anim/index.ts @@ -193,6 +193,11 @@ export function startBlobAnim(canvas: HTMLCanvasElement) { hasFocus = false; }; + new ResizeObserver(() => { + // Redraw for new canvas size + if (!animating) drawFrame(0); + }).observe(canvas); + addEventListener('focus', focusListener); addEventListener('blur', blurListener); @@ -201,6 +206,24 @@ export function startBlobAnim(canvas: HTMLCanvasElement) { removeEventListener('blur', blurListener); } + function drawFrame(delta: number) { + const canvasBounds = canvas.getBoundingClientRect(); + canvas.width = canvasBounds.width * devicePixelRatio; + canvas.height = canvasBounds.height * devicePixelRatio; + const loadImgBounds = loadImgEl.getBoundingClientRect(); + + ctx.fillStyle = blobColor; + ctx.scale(devicePixelRatio, devicePixelRatio); + + centralBlobs.draw( + ctx, + delta, + loadImgBounds.left - canvasBounds.left + loadImgBounds.width / 2, + loadImgBounds.top - canvasBounds.top + loadImgBounds.height / 2, + loadImgBounds.height / 2 / (1 + maxRandomDistance), + ); + } + function frame(time: number) { // Stop the loop if the canvas is gone if (!canvas.isConnected) { @@ -223,21 +246,7 @@ export function startBlobAnim(canvas: HTMLCanvasElement) { const delta = (time - lastTime) * deltaMultiplier; lastTime = time; - const canvasBounds = canvas.getBoundingClientRect(); - canvas.width = canvasBounds.width * devicePixelRatio; - canvas.height = canvasBounds.height * devicePixelRatio; - const loadImgBounds = loadImgEl.getBoundingClientRect(); - - ctx.fillStyle = blobColor; - ctx.scale(devicePixelRatio, devicePixelRatio); - - centralBlobs.draw( - ctx, - delta, - loadImgBounds.left - canvasBounds.left + loadImgBounds.width / 2, - loadImgBounds.top - canvasBounds.top + loadImgBounds.height / 2, - loadImgBounds.height / 2 / (1 + maxRandomDistance), - ); + drawFrame(delta); requestAnimationFrame(frame); }