[korih]

Добрый день уважаемые. столкнулся с проблемой на канвас. цель сделать простой кропер.
1)загруженное изображение скалируется под разрешение canvas (разрешение полотна 600х400)
2)на данное изображение накладывается черно-белый фильтр и блюр
3)создается второй слой этого же изображения, но уже цветно и обрезанное под нужное разрешение (разрешение можно динамически менять)
4) это слой можно передвигать по всему канвас-полотну и видеть какое изображение будет в результате на выходе
вот часть кода:

handleCanvas = () => {
        let { posX, posY, img} = this.state

        /*  
            img - загруженное изображение
            posX - координаты нового слоя с изобращением по Х
            posY - координаты нового слоя с изобращением по Y

        */

        let c=document.getElementById('canvas_t');
            if(c){
                //
                let MAX_WIDTH = 600;
                let MAX_HEIGHT = 400;
                let width = img.width;
                let height = img.height;

                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                //
                let ctx
                c.width = width
                c.height = height
                ctx = c.getContext('2d')
                ctx.clearRect(0, 0, 600, 400);
                ctx.filter = 'grayscale(100) blur(3px)'
                
                //рендерим фон изображения на полотне
                ctx.drawImage(img, 0, 0, width, height )
                

                //очищаем фильтр
                ctx.filter = 'grayscale(0) blur(0)'
                
                ctx.strokeRect(posX, posY, this.state.w, this.state.h)

                //рендерим новое изображение с позициями и указанным форматом
                ctx.drawImage(img , posX, posY,this.state.w,this.state.h, posX, posY, this.state.w,this.state.h)

                

                ctx.fillStyle = 'rgba(138, 196, 235, 0.7)'

                ctx.fillRect(posX + this.state.w - 5,posY + this.state.h - 5, 10,10)
            }      
    }

Суть проблемы:
редактируемый слой изображения не сходится с фоновым