Fabric.js: Window Resizing Issue - html5-canvas

Question

I'm trying to make a simple PowerPoint-like app. I'm struggling window resizing issue for this two weeks. I really appreciate it if you give me any advice!
I want to keep locating a white rectangle in the middle of a screen so I use absolutePan and zoomToPoint. It works perfect when it's loaded. However, when you resize window the position is drifting.
Here is my code
.
.
handleWindowResize()
window.addEventListener('resize', handleWindowResize)
.
.
function handleWindowResize(){
var clientWidth = document.getElementById('drawing-area').clientWidth
var clientHeight = document.getElementById('drawing-area').clientHeight
canvas.setDimensions({ width: clientWidth, height: clientHeight })
// Pan canvas to locate white board center
let panX = - (canvas.width - WB_WIDTH)/2
let panY = - (canvas.height - WB_HEIGHT)/2
var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
canvas.absolutePan(new fabric.Point(panX,panY))
canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
canvas.renderAll();
}
I think panning works out but zoomToPoint function doesn't work correctly. The center point of zoom doesn't seem to be correct.
I tried relativePan, setViewportTransform, and some other functions, but no luck.
Please help!
screen shot
Codepen: my code

Answer 1

finally I solved this issue.
Must set Zoom = 1 before panning
var zoom = Math.min(canvas.height/WB_HEIGHT, canvas.width/WB_WIDTH) * 0.9
canvas.setZoom(1) // Must set zoom = 1 before panning
canvas.absolutePan(new fabric.Point(panX,panY))
canvas.zoomToPoint(new fabric.Point(canvas.width/2, canvas.height/2), zoom)
canvas.renderAll();