Date post: | 02-Mar-2018 |
Category: |
Documents |
Upload: | adi-huseinbegovic |
View: | 216 times |
Download: | 0 times |
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 1/18
Bachelor Project ReportSoftware Development and Business Management
HTML Web-based Drawing Board
Student: Adi Huseinbegovic M#1231627
Scerbakov, Nikolai, Ao.Univ.-Prof. Dipl.-Ing. Dr.techn.SS 2016
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 2/18
Table of Contents:
1 Introduction: 3
1.1 Project`s requirements: 3
2 Problems and goals: 4
2.1 Drawing Board and HTML5: 4
2.2 Board, Shapes and Colors: JavaScript backend: 4
2.3 Working with data: save, load, parse 5
3 Architecture and organization: 5
3.1 Saving data: 6
3.2 Loading data: 7
3.2.1 Open image in a browser(load from the server) 83.3 Canvas: 8
3.3.1 Drawing Board with Canvas 9
3.4 Shapes: 9
3.4.1 Drawing a shape on the canvas: 9
3.4.2 Point: 11
3.4.3 Line: 11
3.4.4 Circle: 11
3.4.5 Triangle: 12
3.4.6 Square: 12
3.4.7 Filled / unfilled: 13
3.5 Other elements: 13
3.5.1 Text: 13
3.5.2 Text Size: 14
3.5.3 Stroke Width: 15
3.5.4 Color Palette: 16
3.5.5 Selecting a tool: 17
4. Installation and notes: 17
5. Conclusion: 18
6. References 18
Adi Huseinbegovic Drawing Board 2
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 3/18
1 Introduction:
Nowadays, we are witnesses how the technology moves forward each day. Around 10
years ago we could not even imagine that we would be able to manipulate images and
content directly on the website, but not only that we already have the possibility to do that
in a real-time, directly on the content online, but we do have applications like Photoshop
Online Tools by Adobe, which allow us to use many image manipulation techniques
directly on the web.
As probably everyone has heard of, uses/used and knows about the Program MS Paint,
where it is possible to draw and sketch own images using different shapes and colors, this
project´s goal was to develop and implement a web-based drawing board which is actually
what MS Paint is, but only as a desktop application. This one was to develop using HTML5
Canvas Element, which supports drawing graphics in the real-time on the web. Canvas is
actually a container for the graphics being drawn, but the actual drawing is done using
JavaScript. This project contains possibility to draw different kind of shapes(square, circle,
triangle, lines) in different colors, and also has the possibility to write text, change
thickness of the shapes which are being drawn. Another feature is that the user is able to
Save his/her drawing for future use. It means that the user can draw whatever they like,
save the image, and then with another visit load that same image and continue to draw on
it. In order to save and load images, a connection with a server was needed and for the
communication with the server-side, PHP was used, and images are being saved in
MySQL database. In order to be able to cross between client-side(JavaScript) and server-
side(PHP), AJAX was used. AJAX is used for communication with server-side by sending
data and information in different kinds of formats like JSON, XML, HTML, but for this
project information were encoded in XML format. Also, the drawing board was supposed to
be implemented using DHTML and of course HTML5.
1.1 Project`s requirements:
• The drawing board must be implemented using JavaScript, DHTML & HTML 5
technology.
• The drawing board should support basic shapes, lines and pencil.
• As a user selects & draws a shape, the application creates an internal representation of
such drawing using any XML encoding.
• The internal drawing representation can be sent to a server using XMLHTTP POSTrequest or requested from a server using XMLHTTP GET request.
• Drawing board should be implemented using canvas HTML 5 element.
Adi Huseinbegovic Drawing Board 3
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 4/18
2 Problems and goals:
2.1 Drawing Board and HTML5:
In order to be able to draw something directly in real-time on the webpage, a Container
was needed. In this case it is Canvas element which came with HTML5. Because
<canvas> element is only a container for graphics(vector), it does not come with pre-
defined functions and methods for drawing(for example: shapes like pencil, line, square
etc.), these elements need to be defined and implemented as functions in JavaScript,
which react on specific events, like mouse click, mouse up, mouse down, mouse drag etc.
2.2 Board, Shapes and Colors: JavaScript backend:
Just like in MS Paint for example, this drawing board also needed to have some shapes
and colors in order to be able to draw some graphics. Shapes which were implemented
are: pencil, square, circle, triangle and line. Square, Circle and Triangle can and may not
be filled. There is also a possibility to write text(element with the symbol „T“). Also, beside
choosing and using the shape, the user may also choose colors other than black. Color
buttons are created using DHTML, an inline combination of HTML and CSS. Other
elements which can be found on the webpage have „Settings“ functionality. User is able to
change the size of the text he/she writes and also change the width of the lines which form
the shapes(pencil, circle, square…). Because almost the whole webpage focuses on
events which get triggered by users while wanting to do something on the webpage, it was
necessary to use JavaScript which reacts to these Events. JavaScript lets us add higher
functionality to the webpage.
Adi Huseinbegovic Drawing Board 4
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 5/18
2.3 WORKING WITH DATA: SAVE, LOAD, PARSE
Because we want to enable the user to draw something on the drawing board, we also
want to let him/her save their work. This drawing board does not only let the user savetheir image, but also has a functionality to load that image after saving it and enabling the
user to continue drawing and working on that same image. In order to do this, image
needs to be pulled from the Canvas element and there should be created a representation
of that image by using some sort of XML encoding. The problem here is that all of this can
and is done by using JavaScript, but in order to save/send the data(image) onto the
remote server, image needs to be passed between front-end and back-end and the way to
this is by using AJAX. After passing the data onto the „back-end“ part of the drawing board,
image is saved into the MySQL database using PHP. User also needs to be able to load
the already saved image and continue drawing on it, which means that now the imagedata should be passed from back-end to front-end and then on the front-end side, image
should be placed into the Canvas Container back, and it should be written over anything
what has been drawn before loading the image. This means that if two or more images are
loaded one after another, images are getting written on each other.
3 Architecture and organization:
Since organization of the files of one project, an important part of the drawing board
project has also been the organization. Because in order to ensure uncomplicated and
easy further development of the project, files have been sorted in categories which
describe their purpose. All JavaScript files have been placed in a folder named „js“ where
in case of having additional .js files they could be organized easy. Same applies to CSS
files which can be found in „css“ folder. There are two additional folders named: „images“
and „saved_images“. In „images“ folder there are all images which are being used directly
on drawing board(icon images, background images, favicon..). In „saved_images“ are
images which are drawn and saved by the users, and all of these images are in a .png
format. Another folder is „db“ which contains files for database creation and MySQL
connecter.
Adi Huseinbegovic Drawing Board 5
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 6/18
3.1 Saving data:
The Save Image button calls a JavaScript function saveCanvasImage() which uses
XMLHttpRequest method to send the canvas image as dataUrl to a PHP file(ajax_save_image.php).
The PHP file converts dataUrl to .png and saves it into saved_images folder. Also the PHP
file saves the image name, image dataUrl and image path into the mysql database to
make it easy to load on canvas just by specifying the image name.
function saveCanvasImage() {
var canvasData = canvas.toDataURL();
var image_name = document.getElementById('image_name').value;
var myVarSet = canvasData+'---'+image_name; var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(xhttp.responseText);
}
};
xhttp.open("POST", "AJAX_save_image.php", true);
xhttp.setRequestHeader("Content-Type", "application/upload");
xhttp.send(myVarSet);
}
Adi Huseinbegovic Drawing Board 6
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 7/18
3.2 Loading data:
Loading image from database in HTML5 Canvas, again uses XMLHttpRequest inside the
loadCanvasImage() function. We send the image name which we want to load from
database in our XMLHttpRequest to a php file (ajax_load_image.php). In our php file we
have made connection to our database and select the row from database
that matches the image name sent through AJAX and send the row to JavaScript as a
dataObject. In JavaScript the image source url is extracted from the dataObject
and image is loaded on HTML5 canvas using the image url.
function loadCanvasImage(){
var load_image = document.getElementById('load_image').value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var response = xhttp.responseText.split("@"); if(response[0] == '1'){
var img = new Image;
img.src = response[1];
img.onload = function(){
ctx.drawImage(img,0,0);
};
}else{
alert(xhttp.responseText);
}
}
};
xhttp.open("POST", "AJAX_load_image.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("imageName="+load_image);
}
Adi Huseinbegovic Drawing Board 7
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 8/18
3.2.1 OPEN IMAGE IN A BROWSER(LOAD FROM THE SERVER)
Images which are drawn and saved, are also saved directly on the server. They can be
accessed by adding /saved_images/name_of_the_saved_image.png to the URL of the
app.
3.3 CANVAS:
Two canvas elements having id’s „canvas“ and „canvas2“ are used in this project. i.e
<canvas id="canvas">
and
<canvas id="canvas2" style="display:none;"></canvas>
All the main functions like drawing shapes, filling shapes etc are done on the main canvas
having id="canvas". Canvas2 is used to save the previous state of the main canvas
whenever we have to clear the main canvas to ensure not to lose the shapes drawn on
the main canvas.
Adi Huseinbegovic Drawing Board 8
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 9/18
3.3.1 DRAWING BOARD WITH CANVAS
3.4 Shapes:
3.4.1 DRAWING A SHAPE ON THE CANVAS:
In order to know which shape function in JavaScript should be called, a user first needs to
select a shape(tool), whose ID is then stored in a variable called active_tool. Once a shapeis selected in the active_tool variable, we know what to draw on the canvas now. We need
to draw the shape once we click on the canvas and drag the mouse cursor on the canvas,
which means that the app needs to call a function on canvas mouse down i.e
canvas.addEventListener('mousedown', isDown);
isDown function is called once a user clicks on the canvas. Inside isDown function we
have another function placeDot which actually draws the shape on canvas i.e
placeDot(e);
Adi Huseinbegovic Drawing Board 9
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 10/18
Furthermore, inside placeDot function we have various checks implemented to check
which shape to draw i.e
if(isDrawing === true && active_tool == 'pencil') {
ctx.lineWidth = stroke_size*2;
ctx.lineTo(_offsetX,_offsetY);
ctx.stroke();
ctx.beginPath();
ctx.arc(_offsetX, _offsetY, stroke_size, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.moveTo(_offsetX, _offsetY);
}
The above piece of code is used for a pencil tool. Similarly once we have clicked on the
canvas and start moving the mouse cursor on the canvas, we need to
call the placeDot function.
canvas.addEventListener('mousemove', placeDot);
Each time we move our mouse on the canvas the placeDot function will be called and
keep drawing the shape on our canvas. Then we have a function called on mouseup
event which sets the drawing variable to false which means that once the click up event is
triggered it does not draw any shape on canvas anymore when we move
our mouse on the canvas i.e
canvas.addEventListener('mouseup', isUp);
The variable isDrawing = false; lets us know to stop drawing.
Adi Huseinbegovic Drawing Board 10
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 11/18
3.4.2 POINT:
Drawing a Point is actually a starting point in drawing anything on canvas. Everything
starts from placing the first dot on canvas.
3.4.3 LINE:
To draw a line, all we need to know are the starting co-ordinates and the ending co-
ordinates of the line. Starting co-ordinates are the click position of the mouse and ending
co-ordinates are the distance of mouse drag position from the click position, after which
the line is drawn on the canvas.
ctx.beginPath();
ctx.moveTo(mark_startX,mark_startY);
ctx.lineTo(_offsetX,_offsetY);
ctx.lineWidth = stroke_size;
ctx.stroke();
3.4.4 CIRCLE:
The basic idea of drawing a circle on canvas is by finding the center co-ordinates of the
circle which in our case are the position of mouse click and then drawing the circle by
specifying the radius and radius y of the circle which will be distance of the drag position of
the mouse from distance of the click position of the mouse.
We are not using a perfect circle to draw a circular shape but an ellipse shape because as
we are dragging along the canvas and changing the radius x and
radius y of our shape it no longer remains a perfect circle but becomes an ellipsoidal
shape. The formulas we are using to draw an ellipse are given below:
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = centerX - (radiusX * Math.sin(i)) * Math.sin(0.99 * Math.PI) + (radiusY *
Math.cos(i)) * Math.cos(0.99 * Math.PI); yPos = centerY + (radiusY * Math.cos(i)) * Math.sin(0.99 * Math.PI) + (radiusX *
Math.sin(i)) * Math.cos(0.99 * Math.PI);
if (i == 0) {
ctx.moveTo(xPos, yPos);
}
else {
ctx.lineTo(xPos, yPos);
} }
Adi Huseinbegovic Drawing Board 11
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 12/18
-> a circle has been selected as an
active_tool and it has been drawn on
the canvas.
3.4.5 TRIANGLE:
Triangle tool is a little bit more complicated to achieve. We will use a line tool to draw a
triangle. The first click on the canvas will start the line tool, the second click
will finish the first line and the second click position will become the starting position for the
second line of the triangle and the third click actually completes
the triangle, what results in joining all the lines of triangle and actually drawing our triangle.
Starting point of the firstline + endpoint of the
second l i ne connec t
together to form a full
triangle. In this case it is
also a filled triangle.
———————->>>>
3.4.6 SQUARE:
Drawing a rectangular shape is rather easy to achieve. All we need to know are the
starting co-ordinates of the rectangle which will be the click position
of our mouse and as we drag our mouse cursor along the canvas, it will make our length x
and length y of the rectangle which are the other parameters we need
for our fillRect function i.e
ctx.rect(mark_startX,mark_startY,lengthX,lengthY);
Adi Huseinbegovic Drawing Board 12
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 13/18
3.4.7 FILLED / UNFILLED:
The only difference between the filled and unfilled shapes is the fill property. For filled
shapes we specify ctx.fill(); along with other code.
The fill color of the shape is specified:
ctx.fillStyle = color;
3.5 Other elements:
3.5.1 TEXT:
The basic function of drawing text on HTML5 canvas only requires the starting x and y
positions of the text and the text string itself that needs to be
drawn on the canvas.
ctx.fillText(textString,textdrawX, textdrawY);
Other text properties like fill style and font style can also be specified like this:
ctx.fillStyle = color;
ctx.font = "26 px Georgia";
In our case when someone clicks on the text tool, initially the text string to be written to the
canvas is set to empty. And document.onkeydown = checkKey; event is
attached to our HTML document which enables us to call a function checkKey(e)
whenever a keyboard key is pressed. So once a key is pressed our
checkKey(e) function is triggered. Inside our checkKey(e) function we compare the
keycodes for various keyboard keys to keycode of the key pressed and
find out exactly which key was pressed and append the character for that keycode to our
text string. So each time a key is pressed we update our text
string using updateText() function.
function updateText(alphabet){
textString += alphabet;
drawText();
}
Adi Huseinbegovic Drawing Board 13
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 14/18
If backspace key is pressed, we remove the last character from the string we need to draw
on our HTML5 canvas using this function:
function deleteLastChar(){
textString = textString.slice(0,textString.length-1);
drawText(); }
After the text string is updated, we draw the text on HTML5 canvas using drawText()
function.
function drawText(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(ctx2.canvas, 0, 0);
ctx.font = text_size+"px Georgia"; ctx.fillText(textString,textdrawX,textdrawY);
}
3.5.2 TEXT SIZE:
The text size of the string on canvas is changed using the function given below:
function changeTextSize(){
text_size = document.getElementById('text_size').value; }
changeTextSize() function is called whenever a value is selected from the select box
having id="text_size" in our HTML file.
Text Size:
<select id="text_size" onchange="changeTextSize();">
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>30</option>
<option>36</option>
<option>40</option>
<option>60</option>
</select>
Adi Huseinbegovic Drawing Board 14
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 15/18
3.5.3 STROKE WIDTH:
Just like the text size in the above example, the stroke width is changed using
changeStrokeSize() function.
function changeStrokeSize(){ stroke_size = document.getElementById('stroke_size').value;
}
changeStrokeSize() function is called whenever a value is selected from the select box
having id="stroke_size" in our HTML file.
Stroke Width:
<select id="stroke_size" onchange="changeStrokeSize();">
<option>1</option> <option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option> </select><br />
Difference between Stroke Sizes of: 1, 2, 5 and 9.
Adi Huseinbegovic Drawing Board 15
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 16/18
3.5.4 COLOR PALETTE:
This piece of HTML code is used to create color palette in our document.
<div id="colors"> <h4> Pick A Color From The Palette</h4>
<div class="color active" style="background-color: black"></div>
<div class="color" style="background-color: red"></div>
<div class="color" style="background-color: blue"></div>
<div class="color" style="background-color: green"></div>
<div class="color" style="background-color: yellow"></div>
</div>
And this part of JavaScript code is used to add click event to each color, set the fill style ofthe color and set it as active color in the color palette.
var colors = document.getElementsByClassName('color');
for(var i = 0; i < colors.length; i++) {
colors[i].addEventListener('click', changeColor);
}
function setColor(color) {
ctx.fillStyle = color;
ctx.strokeStyle = color;
var active_color = document.getElementsByClassName('active')[0];
if(active_color) {
active_color.className = 'color';
}
}
Adi Huseinbegovic Drawing Board 16
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 17/18
Whenever a color is clicked changeColor(e) function is called to change the active color of
our HTML5 canvas.
function changeColor(e) {
var change = e.target;
setColor(change.style.backgroundColor);change.className = change.className + ' active';
}
3.5.5 SELECTING A TOOL:
JavaScript onclick event is attached to each tool which sets the active
tool variable i.e
document.querySelector('#pencil').addEventListener('click', function(){ active_tool = 'pencil';document.onkeydown = false; });
The active_tool variable lets us know which tool is selected for
drawing on canvas. In the above example code pencil tool is
selected.
4. Installation and notes:
Drawing Board can be found on a private server and is ready for testing purposes on:
http://drawingboard.leakload.com
All Project Files: .HTML, .js, .php are in a ZIP Folder called:
drawing_board_Adi_Huseinbegovic.zip, and it can be downloaded from the Coronet
Website or you can contact the author directly via [email protected]
To make it run on localhost, you need to adjust the connect.class.php file and enter your
own localhost database information and then in phpmyadmin import the file:
drawing_board.sql. This is only if you want to be able to save images online!
If you want to draw without saving and loading images, you can do it without adjusting the
database. The app still needs to be run on server(localhost or any other).
If you need any help, please contact the author.
Drawing Board has been tested on Google Chrome(49+ Version), on Mozilla Firefox and
Opera.
Adi Huseinbegovic Drawing Board 17
7/26/2019 Drawing Board Report
http://slidepdf.com/reader/full/drawing-board-report 18/18
5. Conclusion:
This project had a goal to make you understand a little bit more or to show you for what
can Canvas Element of HTML5 be used and in which ways. We can see up until now just
how much is JavaScript important for Canvas. Canvas is one very simple, but at the same
time complicated element which gives us opportunities to do so much, and even more.This Drawing Board is actually just one of the applications which can be used with Canvas.
We did not even mention games until now. Cubes, Splines, Triangles and many other
elements are now easy to use with Canvas. In only a couple of lines of code, we can
achieve things which were very complicated previous versions of HTML where we could
not find Canvas. Another application of Canvas are Animations. Graphic elements of
Canvas combined together with Animations draw an incredible potential for Game
Development. This project is very interesting since it brings out something new, something
amazing. In the end, when we have a final product(a Web-app), where you are able to
draw something and play with all the tools which the Drawing Board offers you.Furthermore, this is not supposed to be everything what could have been done in this
project, since the development of the drawing board with Canvas does have many other
opportunities for further development. There are many other tools which could be
implemented and also what I find very interesting might be an online collaboration drawing
board where several users might be able to draw together. In any case, this project has
been an incredible opportunity to learn something new, to try new and interesting things in
HTML5 and JavaScript, and to show us why Canvas and JavaScript, combined together,
form an incredible and powerful tool for web and game development.
6. References
1. http://www.w3schools.com/html/html5_canvas.asp - "HTML5 Canvas." HTML5 Canvas. N.p.,n.d. Web. 1 June 2016.
2. http://www.tutorialspoint.com/html5/canvas_demo.htm - "HTML5 Web Canvas Demo's."Www.tutorialspoint.com. N.p., n.d. Web. 1 June 2016.
3. https://www.sitepoint.com/html5-canvas-tutorial-introduction/ - Gerchev, Ivaylo. "HTML5Canvas Tutorial: An Introduction." RSS. N.p., 2014. Web. 1 June 2016.
4. http://eloquentjavascript.net/16_canvas.html - "Chapter 16Drawing on Canvas." Drawing onCanvas. N.p., n.d. Web. 1 June 2016.
5. http://www.w3schools.com/js/ - "JavaScript Tutorial." JavaScript Tutorial. N.p., n.d. Web. 1 June2016.
6. http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp - „AJAX - Create anXMLHttpRequest Object." AJAX Create an XMLHttpRequest Object. N.p., n.d. Web. 1 June2016.
7. http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ - "Create aDrawing App with HTML5 Canvas and JavaScript." { William Malone }. N.p., n.d. Web. 1 June2016.
Adi Huseinbegovic Drawing Board 18