helper-drop-here-canvas.xhtml (793B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Canvas drag and drop: helper file</title> 5 <script type="application/ecmascript"> 6 function paint(color) 7 {var canvas = document.querySelector('canvas'), 8 c = canvas.getContext('2d'); 9 c.fillStyle = color; 10 c.beginPath(); 11 c.moveTo(0,0); 12 c.lineTo(100,0); 13 c.lineTo(100,100); 14 c.lineTo(0,100); 15 c.closePath(); 16 c.fill();} 17 function start(event) 18 {event.dataTransfer.effectAllowed = 'copy'; 19 event.dataTransfer.setData('text/plain', 'green');} 20 </script> 21 </head> 22 <body onload="paint('gray')"> 23 <p> 24 <canvas width="100" height="100" ondragenter="event.preventDefault()" ondragover="return false" ondrop="paint(event.dataTransfer.getData('text/plain'))">Canvas</canvas> 25 </p> 26 </body> 27 </html>