HTML5 drag and drop images from a toolbar to a canvas


Use jquery-ui to create draggable elements.


Load these elements with data payloads which are key-value pairs.

In your case this might be an image object that you want drawn on the canvas.


Set your canvas as a drop zone:


When you drop the elements on canvas you can read the data (image) and drawImage that image to the canvas.

function myDropHandler(e,ui){
    var x = ui.offset.left - $("#myCanvas").offset.left;
    var y =  - $("#myCanvas");
    var image ="image");
    // draw on canvas

Here’s a nice tutorial on drag-drop elements with data payloads using jquery-ui:

Leave a Comment