Please give constructive criticism on all trends and standards. How professional is this code written?

Question

JavaScript

Please rate out of 10. Thanks for the criticism!

window.onload = function() {

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        width = canvas.width = window.innerWidth,
        height = canvas.height = window.innerHeight,
        tileWidth = 60,
        tileHeight = 30,
        activeTile = null,

        activeScale = {
            status: false
        };

    let tiles = []
    let img     = document.createElement("img")
    
    let getMap = async function (){

        this.map = await new sendFetch(activeTile, 'getmap', 'GET')

        return JSON.parse(this.map)
    }

    img.addEventListener("load", function() {

        (async function(){

            this.map = await getMap()

            init(this.map);
            
            setInterval(() => {

                ctx.clearRect(-width, -1000, 3000, 3000)
                draw(this.map)

            },500)

        })()

    })
    
    img.src = "tileset.png"

    ctx.translate(width / 2, 10)


    function init(map) {

        for (var x = 0; x < map.length; x++) {
            for (var y = 0; y < map[x].length; y++) {
                tiles.push({ x, y, type: map[x][y], active: false })

            }
        }
    }


 async function draw(p_mainMap) {

        if(activeTile){

            const newStroke  = await wait(activeTile, p_mainMap)

            //присваиваем полученной фигуре статус активного
            for(let i = 0; tiles.length > i; i++){
                
                for(stroke of newStroke){

                    if(tiles[i].x == stroke.x && tiles[i].y == stroke.y){

                        tiles[i].active = true
                    }
                }
            }

        }
        
        tiles.forEach(elem => drawImageTile(elem))
    }


    let rectFigure = new Path2D()
        
        rectFigure.moveTo(2, 9)
        rectFigure.lineTo(tileWidth / 2 + 2, tileHeight / 2 + 9)
        rectFigure.lineTo(2, tileHeight + 9)
        rectFigure.lineTo(-tileWidth / 2 + 2, tileHeight / 2 + 9)
        rectFigure.lineTo(3, 9)


    //отрисовка тайлов-картинок и одного квадрата вокруг тайл-картинки
    function drawImageTile({ x, y, type, active }) {

        const xx = (x - y) * tileWidth / 2
        const yy = (x + y) * tileHeight / 2

        ctx.save();
        ctx.translate(xx, yy)


        ctx.drawImage(img, type * tileWidth, 0, tileWidth, img.height,
        	-tileWidth / 2, 0, tileWidth, img.height);

        if (active) ctx.strokeStyle = 'red'
            else ctx.strokeStyle = '#ffffff00'



        ctx.beginPath()
        ctx.lineWidth = 3
        ctx.stroke(rectFigure);
        ctx.closePath()

        ctx.restore();
    }




    canvas.addEventListener('mousemove', (e)=>{

            let tile,
                isInPath = false

            for (tile of tiles) {

                isInPath = ctx.isPointInPath(
                    rectFigure,
                    e.clientX - (tile.x - tile.y) * tileWidth / 2,
                    e.clientY - (tile.x + tile.y) * tileHeight / 2,

                )
                
                if (isInPath) break;
            }
            
            
            if (activeTile) activeTile.active = false;

            if (isInPath) {

                activeTile = tile;
                activeTile.active = true;

                //неявная модификация основного массива содержащая ссылку
                tiles.map(elem => elem.active = false)

            }else{
                activeTile = null;

            }

            //система захвата курсором карты для масштабирования
            if(activeScale.status){

                ctx.setTransform(1, 0, 0, 1, e.clientX - activeScale.diffX, e.clientY - activeScale.diffY)

            }
        

    })
    //фиксируем расстояние курсора на холсте для правильного ведения карты
    canvas.addEventListener('mousedown', function(e){

        activeScale = {

            status: true,
            diffX: e.clientX - ctx.getTransform().e,
            diffY: e.clientY - ctx.getTransform().f
        }

    })

    canvas.addEventListener('mouseup', function(e){

        activeScale.status = false

    })

    canvas.addEventListener('mouseout', function(e) {

        if (activeTile) activeTile.active = false;

        activeTile = null;
        activeScale.status = false
    })

    canvas.addEventListener('click', function(e){

       (async function (){

           this.data = await new sendFetch(activeTile, 'currtile', 'POST')
    
            console.log(this.data)
        })()
        

    })
    

}