drag and drop multiple images between canvas(s)

Question

I want to drag and drop multiple images from one canvas to another using HTML5. The tutorial that I found by googling shows how to drag and drop only one image.

Below is the code that I tried. In that I am not able to add multiple images. I am able to drag and drop one image one but not able to add many image to that canvas.

<script>
    window.onload = function ()
    {
        var canvas1 = document.getElementById("cvs1");
        var canvas2 = document.getElementById("cvs2");
        var context1 = canvas1.getContext('2d');
        var context2 = canvas2.getContext('2d');
        var imageXY  = {x: 5, y: 5};

        /**
        * This draws the image to the canvas
        */
        function Draw ()
        {
            //Clear both canvas first
            context1.clearRect(0,0,canvas1.width,canvas1.height);
            context2.clearRect(0,0,canvas2.width,canvas2.height);

            //Draw a red rectangle around the image
            if (state && state.dragging) {
                state.canvas.getContext('2d').strokeStyle = 'red';
                state.canvas.getContext('2d').strokeRect(imageXY.x - 2.5,
                                                         imageXY.y - 2.5,
                                                         state.image.width + 5,
                                                         state.image.height + 5);
            }

            // Now draw the image
            state.canvas.getContext('2d').drawImage(state.image, imageXY.x, imageXY.y);
        }

        canvas2.onclick =
        canvas1.onclick = function (e)
        {

            if (state && state.dragging) {
                state.dragging = false;
                Draw();
                return;
            }

            var mouseXY = RGraph.getMouseXY(e);

            state.canvas    = e.target;

            if (   mouseXY[0] > imageXY.x
                && mouseXY[0] < (imageXY.x + state.image.width)
                && mouseXY[1] > imageXY.y
                && mouseXY[1] < (imageXY.y + state.image.height)) {

                state.dragging       = true;
                state.originalMouseX = mouseXY[0];
                state.originalMouseY = mouseXY[1];
                state.offsetX         = mouseXY[0] - imageXY.x;
                state.offsetY         = mouseXY[1] - imageXY.y;

            }
        }

        canvas1.onmousemove =
        canvas2.onmousemove = function (e)
        {

            if (state.dragging) {

                state.canvas = e.target;

                var mouseXY = RGraph.getMouseXY(e);

                // Work how far the mouse has moved since the mousedon event was triggered
                var diffX = mouseXY[0] - state.originalMouseX;
                var diffY = mouseXY[1] - state.originalMouseY;

                imageXY.x = state.originalMouseX + diffX - state.offsetX;
                imageXY.y = state.originalMouseY + diffY - state.offsetY;

                Draw();

                e.stopPropagation();
            }
        }

        /**
        * Load the image on canvas1 initially and set the state up with some defaults
        */
        state = {}
        state.dragging     = false;
        state.canvas       = document.getElementById("cvs1");
        state.image        =  new Image();
        state.image.src    = 'images/logo.png';
        state.offsetX      = 0;
        state.offsetY      = 0;


        state.image.onload = function ()
        {
            Draw();
        }
    }
</script>

<canvas id="cvs1" width="400" height="125" style="float: left">[No canvas support]</canvas>
<canvas id="cvs2" width="400" height="125" style="float: left; margin-left: 100px">[No canvas support]</canvas>

What have you tried? What didn't work? Please show us you've done some effort and don't expect us to do the work for you. — user703016, Jun 20 '13 at 20:20
please pardon me I am new to stackoverflow, I was not able to add answer please see my code that I edited in my ques. Thanks in advance. — Vishrant, Jun 20 '13 at 20:29
See: http://stackoverflow.com/questions/17241035/drag-and-drop-multiple-images-from-one-canvas-to-other — markE, Jun 22 '13 at 00:37

drag and drop multiple images between canvas(s)

0 Answers0