This program is also known as Temporary Paint Interface, as the drawn paint/object cannot be saved to a hard disk as it is. To save it, we need to hit Print Screen key, which copies the drawing on to the clipboard.
TPI.html (Fig. 1) is coded in Java-Script and is easy to understand, as the code is self-explanatory. This is used to create drawings such as freehand lines, rectangles and even arcs.
Freehand tool can be used to draw or scribble free-flowing shapes that can include any kind of graphic object, namely, a curve, line, circle or an arc, just based on the way we hold down the primary button and move the mouse pointer in the canvas area.
The canvas element of HTML5 is used to make the diagrams as per our requirement. We need to define the canvas as a 2D object in the code to place the required object in the desired space.
We can also change the radius of the circle and the thickness of a stroke; both vary on a scale of 1 to 30. And if needed, we can change the same in the code, up to a maximum of 100.
This program generates volatile drawings. The interface has been tested on Windows 8 operating system (OS) (Windows 7 OS in EFY lab) in Chrome browser. The interface does not run properly on touch based systems, as it is difficult to draw using fingers on this interface. But you can draw figures using a mouse or touchpad.
The interface also supports the whole gamut of colours with much ease. Colour names have been defined in a combo box rather than radio buttons, as combo box can be easily used to select one among various colours, and also saves space for other on-screen elements.
Copy the code in a notepad and save the file with .html extension in a definite path. Open the .html file to see the interface as depicted in Fig. 1.
Download source code: click here