Seminar on HTML5 Canvas and Drag/Drop
HTML5 Canvas and Drag/Drop
This presentation is based on some of Html5 cool features like Canvas and Drag and Drop. Includes Html5 native Drag/Drop and Canvas drawing capabilities, challenges,limitations and available plugins.
HTML 5 canvas is supported by all major browsers, IE, Chrome, Firefox, Safari and Opera. Canvas features, we can draw shapes, rectangles, polygons, curves etc. using HTML 5 canvas. We can fill colors, we can create gradients and patterns, render text, manipulate pixels, we can export contents of canvas to static file.
We will discuss 2D context. Then we are applying the style and do ctx.fill style. These are basic methods for HTML 5 canvas, fillrect will fill the whole rectangle, strokerect will fill the outline, clearrect clears all pixels in a given rectangle. Then arc to draw arcs, with filltext we can apply size, color etc. but not padding like we do in CSS. So there are some limitations.
There is one library available in github. To convert HTML 5 canvas, so if you want to prepare a screeshot of your HTML page into a canvas image then you can use this library. Here you can check out the documentation. Then there are some popular canvas frameworks available like fabricjs, kineticjs, easeljs, paperjs.
If you don't want to write code of your own you can use these. If you wanted to choose your framework then there is a comparison given here. There are many tutorials available for canvas. Using HTML 5 we can draw quadratic curves. Bezier curves and draw images.
Now let me talk on one more cool feature of HTML 5 drag and drop feature. Before HTML 5 we used some JQuery plugins to provide drag-drop functionality. If you are using any other API then it would be bigger in size and it will affect the performance. In case of HTML 5 you don't need those API. All major browsers support drag-drop features. These are the drag events like dragstart, dragenter, dragover and dragleave.
Then drop events like drag, drop, dragend. If you have registered all mouse events, then drag event will get priority and get... Let me show you an example of HTML 5 drag and drop. So this was basic for HTML 5 canvas drag and drop. Thanks for watching.