HTML5 Canvas Drag and Drop an Image

Get last news, demos, posts from Konva

To drag and drop an image with Konva, we can set the draggable property
to true when we instantiate a shape, or we can use the draggable() method.
The draggable() method enables drag and drop for both desktop and mobile
applications automatically.

Konva Drag and Drop an Image Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop an Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

function drawImage(imageObj) {
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});

var layer = new Konva.Layer();
// darth vader
var darthVaderImg = new Konva.Image({
image: imageObj,
x: stage.width() / 2 - 200 / 2,
y: stage.height() / 2 - 137 / 2,
width: 200,
height: 137,
draggable: true
});

// add cursor styling
darthVaderImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
darthVaderImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});

layer.add(darthVaderImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = '/assets/darth-vader.jpg';
</script>
</body>
</html>