Three.js print preview canvas not fully visible but screenshot it is - three.js

Question

I have a three.js project running where i try to print the scene with the normal window.print() function.
It kind of worked but not as i expected.
This is my scene:
This is the screenshot with function (renderer.render) which works perfectly:
This is the print preview if i click "print" in the browser:
As you can see the print preview is not centered at all and also it is shifted a little bit to the left.
Can someone explain me either how i can shift the cameras view a little bit to the right so he takes the image centered from the view, or how i can transform the taken screenshot to the print preview because the screenshot taken with renderer.render(scene, camera) works very well?
This is the code:
`
function init() {
renderer = new THREE.WebGLRenderer({
antialias: true
}, { preserveDrawingBuffer: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.domElement.className = 'realCanvas';
container.appendChild(renderer.domElement);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 50, 0);
controls.maxPolarAngle = Math.PI / 2;
controls.minDistance = 350;
controls.maxDistance = 2550;
controls.minZoom = 350;
controls.maxZoom = 2550;
controls.zoomSpeed = 0.75;
controls.panSpeed = 0.75;
controls.rotateSpeed = 0.55;
var minPan = new THREE.Vector3( - 1500, - 1500, - 1500);
var maxPan = new THREE.Vector3(1500, 1500, 1500);
var _v = new THREE.Vector3();
controls.addEventListener("change", function () {
_v.copy(controls.target);
controls.target.clamp(minPan, maxPan);
_v.sub(controls.target);
camera.position.sub(_v);
})
controls.update();
window.addEventListener('resize', onWindowResize, false);
// stats
stats = new Stats();
stats.dom.classList.add("myStats");
$('.myStats').css("display", "none");
container.appendChild(stats.dom);
}
`
This is the background init:
`
function initBackground() {
container = document.createElement('div');
container.classList.add("myCanvas");
document.body.appendChild(container);
container.style.cssText = 'position:fixed; top:0;';
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 2.0, 100000);
camera.position.set(-220, 100, -650); //(-220, 100, -650);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xcce0ff);
scene.fog = new THREE.Fog(0xcce0ff, 5000, 10000);
scene.add(new THREE.AmbientLight(0x222222, 0.75));
var light = new THREE.DirectionalLight(0xffffff, 0.01);
light.position.set(200, 450, 500);
light.castShadow = true;
scene.add(light);
var gt = new THREE.TextureLoader().load("examples/textures/terrain/street4.jpg");
var gg = new THREE.PlaneBufferGeometry(32000, 32000);
var gm = new THREE.MeshPhongMaterial({
color: 0xffffff,
map: gt
});
ground = new THREE.Mesh(gg, gm);
ground.rotation.x = - Math.PI / 2;
ground.material.map.repeat.set(640, 640);
ground.material.map.wrapS = THREE.RepeatWrapping;
ground.material.map.wrapT = THREE.RepeatWrapping;
ground.material.map.encoding = THREE.sRGBEncoding;
// note that because the ground does not cast a shadow, .castShadow is left false
ground.receiveShadow = false;
ground.position.set(-20, -20, -20);
scene.add(ground);
$('div myCanvas').hide(); // before canvas but color picker colored square is also canvas
}
`
This is the code for the taken screenshot which works good:
`
jQuery('#screenshot').click(function () {
renderer.render(scene, camera);
renderer.domElement.toBlob(function(blob) {
saveAs(blob, "Configurator");
});
});
`
This is the code i used for print preview, but it does not work as expected:
`
const mediaQuery = window.matchMedia('print');
mediaQuery.addEventListener("change", () => {
renderer.render(scene, camera);
/*const c = document.getElementsByClassName("realCanvas");
if(c.width === -1){
renderer.setSize(window.innerWidth, window.innerHeight);
c.width=window.innerWidth;
} else {
renderer.setSize(1050, 800);
//renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8);
c.width=-1;
}*/
});
I tried to shift the cameras position but also the viewpoint but it does not work as expected.
I want to have the same view in the print preview as if i take a screenshot out of the scene.