{"id":8261,"date":"2014-07-01T05:08:25","date_gmt":"2014-06-30T19:08:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8261"},"modified":"2014-07-01T05:08:25","modified_gmt":"2014-06-30T19:08:25","slug":"htmljavascript-canvas-image-drag-and-drop-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-canvas-image-drag-and-drop-tutorial\/","title":{"rendered":"HTML\/Javascript Canvas Image Drag and Drop Tutorial"},"content":{"rendered":"
\"HTML\/Javascript<\/a>

HTML\/Javascript Canvas Image Drag and Drop Tutorial<\/p><\/div>\n

The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n

In today’s tutorial we show some image Drag and Drop functionality that you can use with the Canvas HTML5 element. We thank w3schools for the great advice at this link<\/a>.<\/p>\n

You’ll notice we don’t mention PHP as a server-side language here because we predefine an array of image names without having to dynamically work out that list. A change that could be done is to involve Ajax and\/or PHP to read the list via a JSON or XML data source, as an alternative to “somewhat” hard-coded image names.<\/a><\/p>\n

You may want to read more at HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial javascript – How do I add a simple onClick event handler to a canvas element? – Stack Overflow<\/a>.<\/p>\n

As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n

Link to some downloadable HTML programming code … rename to draganddrop_chalkboard.html<\/a>\n<\/p>\n

You’ll notice heavy use of the Javascript Math.random()<\/a> function.<\/p>\n

We hope you enjoy this tutorial as a live run<\/a>.<\/p>\n

Yes … you’ve reached the end … the photographs used for imagery are based on the Street Art project here<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n