drawing board report

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



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



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.




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.




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.




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);

}




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);

}




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.




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);




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.




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);

} }




-> 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);




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.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();

}




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>




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.




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.strokeStyle = color;

var active_color = document.getElementsByClassName('active')[0];

if(active_color) {

active_color.className = 'color';

}

}




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.


mailto:[email protected]

http://drawingboard.leakload.com/



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.


http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

http://www.w3schools.com/js/

http://eloquentjavascript.net/16_canvas.html

https://www.sitepoint.com/html5-canvas-tutorial-introduction/

http://www.tutorialspoint.com/html5/canvas_demo.htm

http://www.w3schools.com/html/html5_canvas.asp

drawing board report

Documents