在画布周围拖动图像

我正在研究一个反应应用程序，它具有一些功能，允许用户在画布上拖动和图像并重新定位它，我已经移动功能，但它不是特别好，它似乎只是重绘了一个新的图像旧的顶部在图像反馈中的图像内给出图像 . 其次它似乎拖到图像的左上角而不是点击点我不知道我做错了什么 .

这是一个例子，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;

我将如何平滑这个拖动，这样它不仅可以在顶部绘制一个新图像，而且还会从点击点而不是图像的左上角拖动？