在画布上拖动图像

Question

我目前正在开发一个React应用程序，该应用程序具有一些功能，允许用户在画布上拖动图像并重新放置它，我具有移动功能，但是并不是特别好，它似乎只是重新绘制了一个新的在旧图像的顶部给出图像，在图像反馈之内。其次，它似乎拖到图片的左上角，而不是点击点，我不确定自己在做什么错。

这里是一个示例https://j3mzp8yxwy.codesandbox.io/，下面是我的反应代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import styled from "styled-components";

import { toggleCommentModal, setCommentPos } from '../../actions/index';
import CommentHandle from "../../CommentHandle";

class ConnectedCanvasStage extends Component {

    constructor(props) {
        super(props);

        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);

        this.state = {
            dragging : false,
            dragoffx : 0,
            dragoffy : 0
        }

    }

    render() {

        const CanvasStage = styled.div`
            width: 100%;
            height: ${document.body.clientHeight}px;
            position:relative;
        `;

        return(
            <CanvasStage>

                <canvas id="canvas"
                          ref="canvas"
                          width={document.body.clientWidth - (document.body.clientWidth * 0.10)}
                          height={document.body.clientHeight}
                          onMouseDown={this.handleMouseDown}
                          onMouseMove={this.handleMouseMove}
                          onMouseUp={this.handleMouseUp}
                />
            </CanvasStage>
        );
    }

    componentDidMount() {
        this.updateCanvas();
    }

    updateCanvas(x=0, y=0) {
        this.ctx = this.refs.canvas.getContext("2d");
        let base_image = new Image();
        base_image.src = this.props.image;
        base_image.onload = () => {
            this.ctx.drawImage(base_image, x, y, (document.body.clientWidth - (document.body.clientWidth * 0.10)) * 2, document.body.clientHeight * 2);
        }
    }

    handleMouseDown(event) {
        switch(this.props.activeTool) {
            case "move":
                let mx = event.clientX;
                let my = event.clientY;
                let pos = this.getRelativeClickPosition(document.getElementById('canvas'), event);
                this.setState({
                    dragging: !this.state.dragging,
                    dragoffx : parseInt(mx - pos.x),
                    dragoffy : parseInt(my - pos.y)
                });
            break;

            case "comment":
                let comment_position = this.getRelativeClickPosition(document.getElementById('canvas'), event);
                this.addComment(comment_position.x, comment_position.y);
            break;
        }
    }

    handleMouseMove(event) {
        if(this.props.activeTool == 'move' && this.state.dragging) {

                var dx = event.clientX - this.state.dragoffx;
                var dy = event.clientY - this.state.dragoffy;

                this.updateCanvas(dx, dy);

        }
    }

    handleMouseUp() {
        this.setState({
            dragging :false
        });
    }

    shouldComponentUpdate() {
        return false;
    }

    addComment(x, y) {
        x = x - 24;
        y = y - 20;
        this.props.toggleCommentModal(true);
        this.props.setCommentPos({x, y});
    }

    getRelativeClickPosition(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };

    }

}

const mapDispatchToProps = dispatch => {
    return {
        toggleCommentModal : visible => dispatch(toggleCommentModal(visible)),
        setCommentPos : position => dispatch(setCommentPos(position))
    };
};

const mapStateToProps = state => {
    return {
        activeTool : state.activeTool,
        comments : state.comments
    }
};

const CanvasStage = connect(mapStateToProps, mapDispatchToProps)(ConnectedCanvasStage);
export default CanvasStage;

我将如何平滑此拖动，以使其不仅在顶部绘制新图像，而且还从单击点而不是图像的左上方拖动？