About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Drag-and-drop between canvas tags

Written by Richard Heyes, RGraph author, on 17th January 2013
Warning
Update: This example has been changed to use "Click to pick up, click to put down" This makes dragging much more comfortable and avoids any selection peculiarities.

View example on CodePen
This is a demo that shows you how you can drag an image from one canvas to another. The canvas tags have a css border so that they can be clearly seen and the image is the RGraph logo (in the CodePen example a data: string is used instead of a standard image URL. As with most canvas operations the code is verbose - but most of it is concerned with dragging the image around the canvas.


How it works

Because canvas is effectively a blank piece of paper on your page on to which you can draw, the canvas tags need to be completely redrawn when moving the image. As a result, it means that the coordinates for the images need to be calculated from the mouse coordinates. The switch from canvas to canvas is done by having each canvas update a "state" variable that dictates which canvas the image should be drawn on.


The JavaScript code

<script>
    // Everything starts when the page has finished loading
    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 tags 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    = 'https://www.rgraph.net/images/logo.png';
        state.offsetX      = 0;
        state.offsetY      = 0;

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