JavaScript

Canvas API

The Canvas API uses grid coordinates to create images using JavaScript. The following expample of a house was created using Canvas. First the canvas dimensions must be defined (I added a green border to visualize this area) in HTML, then users can plot an image in JavaScript. Canvas uses an x,y axis coordinate system with 0,0 being the top-left corner. X moves to the right, Y increases downward. Methods, like "strokeRect()" are used to draw rectangles in JavaScript.

Drag and Drop API

The HTML5 Drag and Drop API allows users to interact with elements by dragging and dropping them between different parts of a web page—or between web pages and external applications (e.g., dragging files or images). Drag-and-drop functionality improves interactivity in applications such as:

• File uploaders (drag files into a drop zone).
• Visual editors or website builders.
• Sorting lists or rearranging elements.
• Image manipulation or canvas tools.

The following example allows users to drag and drop the boxes. Enjoy!