HTML/Javascript Canvas Image Drag and Drop Tutorial
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.
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.
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.
You may want to read more at HTML Canvas Reference 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.
As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.
Link to some downloadable HTML programming code … rename to draganddrop_chalkboard.html
You’ll notice heavy use of the Javascript Math.random() function.
We hope you enjoy this tutorial as a live run.
Yes … you’ve reached the end … the photographs used for imagery are based on the Street Art project here.
If this was interesting you may be interested in this too.
