Seminar on HTML5 Canvas and Drag/Drop

Back to Seminar


Topic Name:
HTML5 Canvas and Drag/Drop

Mohit Turkar

Short Description:
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.

Business Transcription:

Hello there, today I will discuss about HTML 5 canvas and drag-drop feature. I am Mohit Turkar and I have been working with Mindfire since 2012. I worked around HTML 5, CSS, JavaScript, JQuery , nodejs, MongoDB. You can connect with me on facebook, twitter, linkedin. First I will discuss about HTML 5 canvas and then discuss on HTML 5 drag-drop feature.


HTML 5 canvas is container for graphics and it provides 2D drawing platform within the browser. It only uses JavaScript and HTML. To manipulate, you can use JavaScript. HTML 5 canvas uses a bitmap system. So everything is drawn as a single picture. To change anything we have to redraw the picture. There is another way to draw in browsers, that is .. but today we won't discuss on that.


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.


When drawing is done in canvas we can save it as images. This is how we can use HTML 5 canvas tag. Here we give ID as mycanvas, then there is a message, if your browser doesn't support, it will give this message. Then this is the JavaScript code. Here we got that element using ID. We use get contact method and pass 2D as parameter. 3D parameter can be passed that requires different way of trying.


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.

Tags: HTML5, Canvas, Drag-Drop, Javascript, CSS, jQuery, Html5-Canvas, Seminar

Featured Seminar

News & Updates

  • November 19

    20th Year Anniversary Celebration at Malaysia

  • March 19

    Ninth Edition: DDMIT Quiz

Let us Connect!

Awards and Achievements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome  DB Stpi

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2018. Login