GRÁFICOS

<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Canvas

Con canvas podemos manipular desde figuras básicas y texto hasta hacer juegos

¿Cómo se come?

var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.fillStyle="red";ctx.fillRect(0,0,150,200);

<canvas width="300px" height="500px" id="canvas"></canvas>

function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
} 

DRAG & DROP

EJEMPLOS