How to render image on canvas in reactjs

Question

I have added crop image function in my app using react-image-crop but the problem is when i try to crop the image it does not render the right image position on preview I have no idea why. I don't have any experience using canvas before.

This is how My image looks like.

My code to render image on canvas looks something like this.

export function image64toCanvasRef (canvasRef, image64, pixelCrop) {
    console.log('imagePixelCrop', pixelCrop);
    let canvas = canvasRef // document.createElement('canvas');
    canvas.width = pixelCrop.width
    canvas.height = pixelCrop.height
    const ctx = canvas.getContext('2d')
    const image = new Image()
    image.src = image64
    image.onload = function () {
        ctx.drawImage(
            image,
            pixelCrop.x,
            pixelCrop.y,
            pixelCrop.width,
            pixelCrop.height,
            0,
            0,
            pixelCrop.width,
            pixelCrop.height
        )
    }
}

Here this is im getting in pixel crop.

aspect: undefined
height: 92.5
unit: "px"
width: 164.5
x: 70
y: 71

Answer 1

https://github.com/DominicTobias/react-image-crop

shows a demo of the same you are trying to acheive have a look

https://codesandbox.io/s/72py4jlll6?file=/src/index.js:1086-1099