Skip to content

Difference in drawImage coordinates and getImageData/putImageData coordinates #301

Open
@kristopalka

Description

@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:
image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions