Difference in drawImage coordinates and getImageData/putImageData coordinates

[kristopalka]

Hi, i made folllowing code:

    useEffect(() => {
        const canvas = canvasRef.current;
        if (canvas === null) return;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        let context = canvas.getContext('2d');
        const image = new CanvasImage(canvas);
        image.src = imageUrl;

        image.addEventListener("load", async () => {
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            context.getImageData(0, 0, canvas.width, canvas.height)
                .then((imageData) => {
                    context.putImageData(imageData, canvas.width, canvas.height)
                })
        });
    }, []);

and the canvas

       {React.useMemo(() => <Canvas ref={canvasRef}/>, [])}

and now my canvas looks like this:

What I think I am doing:

• draw image for whole canvas size
• get whole canvas size data
• put whole canvas size data with the shift of width and height, so it should be outside canvas

What I got:

• draw image for whole canvas size
• get only part of canvas (0.36% in each direction)
• put it in the 0.36% of width and height

It seems like geiImageData and putImageData interpret the coordinates (canvas.width, canvas.height) in other way than drawImage or even fillRect which also works correctly. I calculated this scale, and it seems to be exactly 2.75 (0.36). The proportions are keeped. My canvas size is 1/3 of screen width and proportion is 3:4. But as I checked, it does not affect scale. When I replace canvas.width with the number, it is all the same.

Please, tell me if I am doing something wrong or what could cause this issue