001.xhtml (957B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Canvas cross page drag and drop</title> 5 <script type="application/ecmascript"> 6 function start(event) 7 {event.dataTransfer.effectAllowed = 'copy'; 8 event.dataTransfer.setData('text/uri-list', document.querySelector('canvas').toDataURL('image/png')); 9 window.location = '001-1.xhtml';} 10 </script> 11 </head> 12 <body> 13 <p> 14 <canvas width="100" height="100" draggable="true" ondragstart="start(event)">Canvas</canvas> 15 </p> 16 <p>Drag canvas pattern. You should be redirected to the new page and be able to drop it there.</p> 17 <script type="application/ecmascript"> 18 var canvas = document.querySelector('canvas'), 19 c = canvas.getContext('2d'); 20 for(var x = 0; x != 50; x++) 21 {c.fillStyle = (x%2 == 0)?'navy':'white'; 22 c.beginPath(); 23 c.moveTo(x,x); 24 c.lineTo(100-x,x); 25 c.lineTo(100-x,100-x); 26 c.lineTo(x,100-x); 27 c.closePath(); 28 c.fill();} 29 </script> 30 </body> 31 </html>