Drag-n-Drop with HTML Canvas
Sunday, 24th April 2011 by Musaul Karim
This example shows how to implement drag-&-drop in a HTML Canvas using javascript. It’s done using plain old Javascript, i.e. without using any libraries like JQuery or moo-tools etc.
The main pitfall to look out for is any scaling done as a result of CSS sizing. The actual width and height of any visual element as calculated by the browser is a combination of all styles that match the element, and as such it may differ from the size specified in the html attribute, as well as to that of any single CSS definition. You should get this in JavaScript using the offsetWidth, and offsetHeight properties of the object.
Anyway, here is the code for the example …
HTML
<canvas id="canvas" width="400" height="300"></canvas>
<div id="status"></div>
