How to do object repositioning/moving within a canvas?

Question

Hi,

How to reposition/move an object (with its content) within a HTML5 canvas? The flow might be: a) select an area (using triangle, like that of MS paint function icon?) b) move the object to a new location (repositioning) with the content intact.

Would appreciate your help.

Answer 1

Do you mean something like:

imagedata = ctx.getImageData(sx, sy, sw, sh);
ctx.putImageData(imagedata, dx, dy);

A canvas is already painted/rendered. So it's just pixels, a triangle stops being a triangle after it's drawn. If you want to be able to move objects like triangles you can use svg.