Our main HTML page has a simple structure. Following is a head tag in an HTML page:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Painting</title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
In the head tag, we only link the CSS file to the page. Other JavaScript files will be connected to the page at the end of the file and the reason is to provide better performance while loading the page. When we add stylesheets in the head tag and JavaScript files at the end of the HTML file (before closing the body tag), our page interface will appear to work faster because the browser doesn't wait to load all JavaScript and CSS files. The web browser loads CSS files because they are in the head tag, and after rendering all the HTML elements, it loads the JavaScript files. This trick gives a better feeling about the application's performance to users.
In the following lines, we have the body and wrapper elements:
<body>
<div id="wrapper">
<div id="header">
<h1>Painting</h1>The wrapper layer is the container for all other elements. Also the div header is the container for the black-colored header at the top of the page, as seen on the output screen. This section also contains the drop-down menus and export links.
The source code for one of the drop-down menus to choose the color of the brushes is as follows:
<div id="colorPicker" class="pickerDropDown">
<span class="hex">Brush color</span>
<span class="fill" style="background-color: #004358;"></span>
<div class="sub">
<ul>
<li>
<a href="javascript:void(0);" class="sphexbrushColor" style="background: #FD7400;">
#FD7400
</a>
</li>
<li>
<a href="javascript:void(0);" class="sphexbrushColor" style="background: #FFE11A;">
#FFE11A
</a>
</li>
<li>
<a href="javascript:void(0);" class="sphexbrushColor" style="background: #BEDB39;">
#BEDB39
</a>
</li>
<li>
<a href="javascript:void(0);" class="sphexbrushColor" style="background: #1F8A70;">
#1F8A70
</a>
</li>
<li>
<a href="javascript:void(0);" class="sphexbrushColor" style="background: #004358;">
#004358
</a>
</li>
</ul>
</div>
</div>Each drop-down menu has a div element with a subclass. Inside the div element, we have some ul and li elements that define the drop-down menu. For color pickers, we have a circle that shows the current color. Other drop-down menus have the same structure. After drop-down menus, we have a link to export the image.
The source code for the same is as follows:
<div id="exportToImage" class="pickerDropDown">
<span class="hex">
<a href="javascript:void(0)" onclick="exportToImage(this);">Export</a>
</span>
</div>As you can see, we have a function call when a user clicks on the Export link. We call the exportToImage function, which converts the Canvas element to a PNG image.
Finally, we have the definition of the Canvas element:
<div id="main"> <canvas id="pStage"></canvas> </div>
The canvas id object is assigned with the pStage value and is placed inside a div element. After that, we link our two JavaScript files. The first file is the CreateJS library with all subsets in a combined file and the second is the app.js file as shown:
<script type='text/javascript' src="http://code.createjs.com/createjs-2013.12.12.min.js"></script> <script type='text/javascript' src="app.js"></script>
We use CreateJS CDN servers to load the main library file. This file is already minified and we can use it in the production environment.