I have a drawn image in canvas with context.drawImage() and I want to select that image to move it with drag and drop in the same canvas (same as MS Paint selection tool). How can I code that in javascript?

function crop(xStart,yStart,xLast,yLast){
    canvas.width = xLast - xStart;
    canvas.height = yLast - yStart;
    context.clearRect(0, 0, canvas.width,canvas.height);           drawFromAux(xStart,yStart,xLast,yLast,0,0);
    return canvas.toDataURL();
}
// img is my original image
function select(xStart,yStart,xLast,yLast){

    selection.src = crop(xStart,yStart,xLast,yLast);
    selection.draggable = "true";
    
    context.clearRect(0, 0, canvas.width,canvas.height);                
    canvas.width = img.width;
    canvas.height = img.height;
    context.clearRect(0, 0, canvas.width,canvas.height);                
    context.drawImage(img, 0, 0);
    context.clearRect(xStart, yStart, xLast - xStart,yLast - yStart); 
    context.drawImage(selection,0,0); 

}

I have a drawn image in canvas with context.drawImage() and I want to select that image to move it with drag and drop in the same canvas (same as MS Paint selection tool). How can I code that in javascript?

function crop(xStart,yStart,xLast,yLast){
    canvas.width = xLast - xStart;
    canvas.height = yLast - yStart;
    context.clearRect(0, 0, canvas.width,canvas.height);           drawFromAux(xStart,yStart,xLast,yLast,0,0);
    return canvas.toDataURL();
}
// img is my original image
function select(xStart,yStart,xLast,yLast){

    selection.src = crop(xStart,yStart,xLast,yLast);
    selection.draggable = "true";
    
    context.clearRect(0, 0, canvas.width,canvas.height);                
    canvas.width = img.width;
    canvas.height = img.height;
    context.clearRect(0, 0, canvas.width,canvas.height);                
    context.drawImage(img, 0, 0);
    context.clearRect(xStart, yStart, xLast - xStart,yLast - yStart); 
    context.drawImage(selection,0,0); 

}

• javascript
• html
• canvas

• Canvas is like a painting. Once you have drawn to it you can NOT move objects. You can only clear the canvas and draw new content to it. Moving an object on a canvas is therefore not two lines of code. Tell me if you want me to do a fiddle with plete code. – Gustav G Commented Jan 4, 2018 at 12:52
• Ok. I tried to do that with another canvas (copy of original one). I put my image in the auxiliar canvas and with selection coords from first canvas I tried to save as image only that piece. I got stuck there – Aria Commented Jan 4, 2018 at 20:23

1 Answer 1

Using Canvas.js and Pointer.js that should not be that hard.

Things to do:

1. create image object containing with x, y and raw image
2. render it to a canvas
3. listen for mouse moves and check if mouse button is pressed
4. simple point collision detection between mouse and image on canvas to be able to "select it" and drag it

Loading Pointer.js and Canvas.js:

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Canvas.js"></script>
<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Pointer.js"></script>

1) Creating an image object is not very hard:

const image = {
    image: new Image(),
    x: canvas.width / 2 - image.width / 2, // centered in canvas
    y: canvas.height / 2 - image.height / 2 // centered in canvas
};

image.image.src = ' <url> ';

2) Render that image to the canvas (using Canvas.js)

const canvas = new Canvas('my-canvas', 500, 500).start();

canvas.on('draw', function ( renderer ) {
    renderer.drawImage(image.image, image.x, image.y);
});

3) Listening for mouse moves and moving the image (using Pointer.js)

const pointer = new Pointer( canvas.element );

let moveImage = false;

pointer.on('move', function ( event ) {
    if( moveImage ) {
        image.x += (event.x - pointer.getMoveHistory(-2).x);
        image.y += (event.y - pointer.getMoveHistory(-2).y);
    }
});

4) Pointer collision detection (using Pointer.js)

pointer.on('down', function () {

    moveImage = pointer.touches({ x: image.x, y: image.y, width: image.image.width, height: image.image.height });

});

pointer.on('up', function () {

    moveImage = false;

});

JSFiddle: https://jsfiddle/GustavGenberg/3h39b9h1/

Hope this helps you :) !