<!doctype html>
<html><head><meta charset="UTF-8" /><title>Canvas Drag and Drop Test</title></head><body><section><div>
<canvas id="canvas" width="400" height="300">This text is displayed if your browser does not support HTML5 Canvas.</canvas></div><script type="text/javascript">
var canvas;
var ctx;var x = 75;var y = 50;var WIDTH = 400;var HEIGHT = 300;var dragok = false;function rect(x,y,w,h) {
ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill();}function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);}function init() {
canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10);}function draw() {
clear(); ctx.fillStyle = "#FAF7F8"; rect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rect(x - 15, y - 15, 30, 30);}function myMove(e){
if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; }}function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; }}function myUp(){
dragok = false; canvas.onmousemove = null;}init();
canvas.onmousedown = myDown;canvas.onmouseup = myUp;</script>
</section>
</body></html>