Zentrierung skaliertes Element jenseits der Fensterbreite und -höhe

Question

Ich habe eine div #content-wrapper, verschachtelt im Inneren ist ein div #canvas-blur und ein main Element. Alle Elemente sollten die gleiche Breite und Höhe des Ansichtsfensters/Fensters haben, aber # canvas-blur hat das CSS transform: scale(1.1);, wodurch es größer wird. Innerhalb des #canvas-blur div gibt es ein canvas-Element, das auf die Größe des Ansichtsfensters/Fensters eingestellt ist. Auf dieser Leinwand habe ich ein Malwerkzeug erstellt, das die Mausposition verfolgt. Das Problem ist, dass #canvas-blur von der linken oberen Ecke (siehe Anhang 1) skaliert wird, was die Mauspositionen auf der Leinwand beeinflusst (siehe Bilder). Ich brauche #canvas-blur, um von der Mitte aus zu skalieren (siehe Anhang 2). Dies bedeutet, dass main und #canvas-blur die gleichen Mittelpunkte haben und zusammen rollen, wie in Anhang 3 dargestellt. Jeder Zeiger in der richtigen Richtung wäre nützlich.

edit: hinzugefügt 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

Answer 1

Klingt wie Transform-Herkunft könnte sein, was Sie brauchen.

Versuchen, diese zu # Leinwand-Unschärfe

transform-origin: center; 

Sie können auch diese zur Haupt versuchen Sie, den Inhalt zu zentrieren, sowohl horizontal als auch vertikal, da Sie flex verwenden:

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