This presentation is based on some of Html5 cool features like Canvas and Drag and Drop. So any one who is working around Html5 may find it useful. It includes Html5 native Drag/Drop and Canvas drawing capabilities, challenges, limitations and available plugins.

1. Html5
Canvas & drag and drop
Presenter: Mohit Turkar, Mindfire Solutions
Date: 5/05/2014

2. Microsoft 70-480 Certified Programmer
Skills:HTML5,CSS,Javascript,Jquery,NodeJS,
MongoDB
Connect me:
Facebook: http://www.facebook.com/mohit.turkar.1
LinkedIn: http://www.linkedin.com/pub/mohit-turkar/53/734/7a3
Twitter: https://twitter.com/mohitturkar
Google+: https://plus.google.com/111509319885889888433/posts
Contact me:
Email: mohitt@mindfiresolutions.com
Skype: mfsi_mohitt

3. Overview
● Container for graphics.
● 2D drawing platform within the browser.
● Uses nothing more than Javascript and html
● Canvas is a Bitmap System
- Everything is drawn as single flat picture
- Changes require the whole picture to be redrawn
Browser Support
IE9+,chrome,Firefox,safari and opera

4. Canvas features
● Drawing shapes
● Filling colours
● Creating gradients and patterns
● Rendering text
● Copying images, video frames, and other canvases
● Manipulating pixels
● Exporting the contents of a <canvas> to a static file

5. Using the Canvas tag
<canvas id=”myCanvas” height=”300” width=”300”>
Your browser does not support the HTML5 canvas tag.
</canvas>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

6. Basic Method
fillRect(x,y,width,height) - Draws a rectangle.It uses current style.
strokeRect(x,y,width,height) - Draws the outline of a rectangle using current
stroke style.
clearRect(x,y,width,height) - Clears all pixels within given rectangle
arc(x,y,radius,startAngle,endAngle,direction) - Draws arc based on parameter
fillText(textString,x,y) - We can apply size,color and font but can not apply
padding,wrappings,margins.

7. Library to convert Html to Canvas :
https://github.com/niklasvh/html2canvas
Canvas framework :
Fabricjs
Kineticjs
EaselJS
Paperjs
Compare chart for canvas framework:
choose your canvas framework
Canvas Tutorial :
html5canvastutorials

8. Drag and Drop
To achieve drag and drop functionality with traditional HTML4, developers would
either have to use complex Javascript programming or other Javascript frameworks
like jQuery etc.
Now HTML5 came up with a Drag and Drop (DnD) API that brings native DnD
support to the browser making it much easier to code up.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop.

9. Drag and Drop Events
dragstart : Fires when the user starts dragging of the object.
dragenter : Fired when the mouse is first moved over the target element while a drag is
occuring. A listener for this event should indicate whether a drop is allowed over this
location. If there are no listeners, or the listeners perform no operations, then a drop is
not allowed by default.
dragover : This event is fired as the mouse is moved over an element when a drag is
occuring. Much of the time, the operation that occurs during a listener will be the same
as the dragenter event.
dragleave : This event is fired when the mouse leaves an element while a drag is
occuring. Listeners should remove any highlighting or insertion markers used for drop
feedback

10. Drag and Drop
drag : Fires every time the mouse is moved while the object is being dragged.
drop : The drop event is fired on the element where the drop was occured at the end
of the drag operation. A listener would be responsible for retrieving the data being
dragged and inserting it at the drop location.
dragend : Fires when the user releases the mouse button while dragging an object.
Note that only drag events are fired; mouse events such as mousemove are not
fired during a drag operation.

11. Presenter: Mohit Turkar, Mindfire Solutions
?
skype_id : mfsi_mohitt
mail_id :
mohitt@mindfiresolutions.com

12. Presenter: Mohit Turkar, Mindfire Solutions
Thank you

13. Reference:
http://www.tutorialspoint.com
http://stackoverflow.com/
http://www.w3schools.com/

14. www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
http://twitter.com/mindfires