How do I get Electron working with DOM elements

I'm using javascript to create a metroidvania game and I want to make it a desktop application instead of a website. I found that most people use electron for this. I tried importing this into my game but I got problems with the document.getElementById and the window element. I tried for 2 hours to solve this but everything I tried didn't work. I hope someone can help me out.

Js code:

const canvas = document.getElementById('canvas1');
const c = canvas.getContext('2d');
// const CANVAS_WIDTH = canvas.width = 800;
// const CANVAS_HEIGHT = canvas.height = 700;

canvas.width = window.innerWidth
canvas.height = window.innerHeight

const gravity = 0.5
var onGround = false;
let scrolled = 0
let jumpTime = 0
const wjumpTime = 10

class Player {
    constructor() {
        this.position = {
            x: 100,
            y: 800
        }
        this.velocity = {
            x: 0,
            y: 0    
        }
        this.width = 60
        this.height = 120
    }

    draw() {
        c.fillStyle = "red"
        c.fillRect(this.position.x, this.position.y, this.width, this.height)
    }

    update() {
        this.draw()
        this.position.y += this.velocity.y
        this.position.x += this.velocity.x

        if(this.position.y + player.height + player.velocity.y <= canvas.height) 
        this.velocity.y += gravity
        else { this.velocity.y = 0
        //onGround = true
        }
    } 
}

class Platform {
    constructor({x, y, w, h}) {
        this.position = {
            x,
            y
        }

        this.width = w
        this.height = h
    }

    draw() {
        c.fillStyle = "blue"
        c.fillRect(this.position.x, this.position.y, this.width, this.height)
    }
}

const player = new Player()
const platforms = [new Platform({ x: 200, y: 800, w: 200, h: 20 }), new Platform({ x: 500, y: 600, w: 200, h: 20 }), new Platform({x: 0, y:935, w:600, h:20 })]

const keys = {
    right: {
        pressed: false
    },
    left: {
        pressed: false
    },
    up: {
        pressed:false
    }
}

function animate() {
    console.log(keys.up.pressed)
    console.log(onGround)
    console.log(jumpTime)
    if (jumpTime == wjumpTime) {
        keys.up.pressed = false
    }
    requestAnimationFrame(animate)
    c.clearRect(0, 0, canvas.width, canvas.height)
    player.update()
    platforms.forEach(platform => {
        platform.draw()
    })

    if(keys.right.pressed && player.position.x < 400) {
        player.velocity.x = 5
    } else if (keys.left.pressed && player.position.x > 100) {
        player.velocity.x = -5
    } else {
    player.velocity.x = 0

    if(keys.right.pressed) {
        platforms.forEach(platform => {
            platform.position.x -= 5
            scrolled -= 5
        })
    }
    else if (keys.left.pressed) {
        platforms.forEach(platform => {
            if(scrolled <= 300) {
            platform.position.x += 5
            scrolled += 5
            }
        })
    }
    }

     if(keys.up.pressed) {
        //for(j = 0; j<jumpTime; j++) {
        onGround = false
        player.velocity.y -= 2
        jumpTime++
    
        //}
     }
    // else if(player.position.y < 700) { 
    //     player.position.y = 701
    //     player.velocity.y = 0
    //     if (keys.up.pressed) {
    //         platform.position.y += 2
    //     }
    // }
    platforms.forEach(platform => {
    if(player.position.y + player.height <= platform.position.y
        && player.position.y + player.height + player.velocity.y >= platform.position.y
        && player.position.x + player.width >= platform.position.x
        && player.position.x <= platform.position.x + platform.width) {
        player.velocity.y = 0
        onGround = true
        jumpTime = 0
    } 
})
}
animate()

addEventListener('keydown', ({ keyCode }) => {
    
    switch(keyCode) {
        case 65:
            console.log('left')
            keys.left.pressed = true
            break
        case 83:
            console.log('down')
            break
        case 68:
            console.log('right')
            keys.right.pressed = true
            break
        case 32:
            if (onGround == true) {
                keys.up.pressed = true
            } else keys.up.pressed = false
            break
        case 87:
            console.log('jump')
            if (onGround == true) {
                keys.up.pressed = true
            } else keys.up.pressed = false
            break
    }
})

addEventListener('keyup', ({ keyCode }) => {

    switch (keyCode) {
        case 65:
            console.log('left')
            keys.left.pressed = false
            break
        case 83:
            console.log('down')
            break
        case 68:
            console.log('right')
            keys.right.pressed = false
            break
        case 32:
            console.log('jump')
            keys.up.pressed = false
            break
        case 87:
            console.log('jump')
            keys.up.pressed = false
            break
    }
})

Html code:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Game</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id="canvas1"></canvas>
    <script src="main.js"> </script>
</body>

</html>