Department: Computing


Programme: Bachelor of Arts (Honours) in Applied and Human-Centred Computing


Project Title: HTML5 Drawing Board (Web-based)


Supervisor: Dr Chris MA


Students: LEUNG Yu Fung, TAI Shing Pong


The task is to develop a drawing board in web-based (HTML5). This drawing board is a novel tool for potential users, teachers, and students. They can use this tool to cooperate with their teaching or learning on the web and make improvements in these aspects.

For example, teachers can sketch and add certain images to explain some complicated concepts to their students. Students can have higher fault tolerance in learning due to certain functions on this drawing board such as undo, redo.


This web-based drawing board is implemented by Konva.js. It consists of three modes, draw, text & object, and combine. The main function in draw mode is to allow the user to draw and erase the line in the board. Text & object mode allows the user to add objects such as text, image to the board. Combine mode has both draw mode and text & object mode functions.


Due to limited time and resources, the drawing board still has certain bugs and concerns in browser compatibility. Although most of the modern browsers can support it, few of them still have some problems existing.


In this report, background, features, advantages, and disadvantages of the development tool, Konva.js are first introduced.

After the brief introduction, the next part is about the drawing board design, the way of implementation, the testing method, and the evaluation of the drawing board.


Lastly, we analyze our final product, find out why some parts are failing or succeed, the suggestion for future improvement, and what we obtain in this developing period.

Address: 6/F, Lee Quo Wei Academic Building, Yuen Campus, The Hang Seng University of Hong Kong, Hang Shin Link, Siu Lek Yuen, Shatin, New Territories
Phone: (852) 3963 5594
Email: sds@hsu.edu.hk
© 2021 The Hang Seng University of Hong Kong. All Rights Reserved.