Question

I’m adding images (nodes) to an HTML5 canvas with the following JavaScript function:

function drawNodes(nodes, context) {
    for (var x in nodes) {
        // Create a closure to prevent a modified closure with the image.onload event handler
        var f = (function (node) {
            var image = new Image();

            image.id = myGetIdFunction();
            image.src = 'image.png';
            image.draggable = true;
            image.dragstart = function (e) {
                alert('Test');
            };
            image.onload = function () {
                context.drawImage(image, node.attributes.position.x, node.attributes.position.y);
            };
        });

        f(nodes[x]);
    }
}

I’m hoping to be able to move the images around on the canvas by dragging and dropping, but I’m running into issues from the start. It seems like the draggable attribute on the image is never set because the dragstart event is never raised. I’ve looked at various samples, but I haven’t been able to determine what I’m doing different.

As a test, I added draggable=”true” to the following image in a div and tested it within Chrome:

<div style="background-color: #eeeeee; height: 100px; width: 100px;">
    <img src="image.png" draggable="true" />
</div>

With the above image in a div, I noticed Chrome starts the drag like I would expect. What is the difference between what I’m doing above and what I’m doing with the image in a canvas (besides the obvious bit about using markup)?

Answer 1

Drag and drop only works with DOM elements. The canvas is a DOM element but contains only a bitmap (a collection of pixels). When you invoke drawImage (or do any other draw call) the call is computed into raw image data represented on the bitmap.

To resemble drag and drop you must manually do the calculations. This is usually done by separately storing the position (on the canvas/in the objects “world” or “scene”) of the drawn object, calculate the screen coordinates based on the stored position and finally match them against the mouse coordinates. I’m sure there are several libs out there that can do the job for you, I’ve never used one myself so I can’t really recommend any.

This seems promising: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/