Question

106

Move image inside HTML canvas with mouse dragging

rated 0 times [ 111] [ 5] / answers: 1 / hits: 20033 / 10 Years ago, fri, february 21, 2014, 12:00:00

I have one image that I need to resize, move, and rotate inside a Canvas, and than another image that I use as a mask to clip the other image using globalCompositeOperation = source-in;

Here is a fiddle.

I was thinking about to add buttons to move the image but why not the mouse? However, I can't find a way how to integrate a dragging function in this code. What do I need to change or hadd here?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mariann

Add To Favorites

Follow

Total Points: 201

Total Questions: 133

Total Answers: 107

Location: Czech Republic

Member since Thu, Aug 11, 2022

2 Years ago

answered 10 Years ago aileent · Accepted Answer

Original - move outer image

See this jsfiddle

Code:

$(window).mousemove(function(event) {

  $(#stcanvas).css({left : event.pageX, top : event.pageY});

});

css:

#stcanvas

{

    position:absolute;    

}

You would obviously add a button to enable movement. Alternatively, you may want to use jquery UI for in-built drag and drop.

Update - move clip

See this jsfiddle.

If what you mean is that you would like to move the clip rather than the image, then do something like this:

$(window).mousemove(function(event) {

    var cWidth = $(#stcanvas).width();    

    moveXAmount = (event.pageX / $(window).width())*cWidth;    

    moveXAmount = moveXAmount - (cWidth/2);

    var cHeight = $(#stcanvas).height(); 

    moveYAmount = (event.pageY / $(window).height())*cHeight;    

    moveYAmount = moveYAmount - (cHeight/2);

    buildcanvas();

});

and in make_pic do this:

ctx.drawImage(mask_image, moveXAmount, moveYAmount);

Update 2 - move clip and inner image

see this fiddle

If you want to move the image and the clip, then , basically you just add the moveXAmount and moveYAmount to drawImage. Hopefully I have exhausted all possibilities now ;)

ctx.drawImage(pic_image, -400 / 2+moveXAmount, -550 / 2+moveYAmount, im_width, im_height);

Update 3 move image and not mask as per comment

See this fiddle

The main change is:

$(#stcanvas).mousedown(function(){

    isDragging = true;

});



$(window).mouseup(function(){

    isDragging = false;

});