SOURCE

// https://brandai-assets.oss-cn-hangzhou.aliyuncs.com/edm/icon/facebook.png
(function() {
    const canvas = document.getElementById('my-canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = 'https://brandai-assets.oss-cn-hangzhou.aliyuncs.com/edm/icon/facebook.png';

    let isDragging = false;
    let offsetX = 0;
    let offsetY = 0;
    let imgX = 0;
    let imgY = 0;

    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
    };

    canvas.addEventListener('mousedown', function(e) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        if (x >= imgX && x < imgX + img.width && y >= imgY && y < imgY + img.height) {
            isDragging = true;
            offsetX = x - imgX;
            offsetY = y - imgY;
        }
    });

    canvas.addEventListener('mousemove', function(e) {
    if (isDragging) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        imgX = x - offsetX;
        imgY = y - offsetY;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, imgX, imgY, img.width, img.height);
    }
    });

    canvas.addEventListener('mouseup', function(e) {
        isDragging = false;
        const rect = canvas.getBoundingClientRect();
        imgX = e.clientX - rect.left - offsetX;
        imgY = e.clientY - rect.top - offsetY;
    });

})()

<canvas id="my-canvas" width="400" height="400" />