javascript - centering scaled element beyond window width and height -

i have div #content-wrapper, nested inside 1 div #canvas-blur , main element. elements should same width , height of viewport/window, #canvas-blur has css transform: scale(1.1); making larger. within #canvas-blurdiv there canvas element set size of viewport/window, on canvas have created painting tool tracks mouse position. problem #canvas-blur scaled left top corner (see appendix 1) effects mouse positions on canvas (see pictures). need #canvas-blur scale center (see appendix 2). means main , #canvas-blur have same center points , scroll illustrated in appendix 3. pointer in right direction useful.

edit: added jsfiddle

<div id="content-wrapper">     <main>      </main>     <div id="canvas-blur">        <canvas>     </div> </div> 

css

#content-wrapper {     height: 100vh;     width: 100vw; } #canvas-blur {     z-index: -1;     position: relative;     transform: scale(1.1); } main {     height: 100vh;     width: 100vw;     box-sizing: border-box;     position: absolute;     z-index: 2;     display: flex; } 

mouse

sounds transform-origin might need.

try adding #canvas-blur

transform-origin: center; 

you try adding main center content both horizontally , vertically since using flex:

align-items: center; justify-content: center;