POSSIBILITIES OF CREATING INTERACTIVE 2D ANIMATIONS FOR EDUCATION USING HTML5 CANVAS JAVASCRIPT LIBRARIES
POSSIBILITIES OF CREATING INTERACTIVE 2D ANIMATIONS FOR EDUCATION USING HTML5 CANVAS JAVASCRIPT LIBRARIES

Summary/Abstract: Using animations and visualizations can help students to better understand different concepts in a shorter time than using textual or graphical representations of the same concepts. However, prior researches showed that not every animation and visualization is educationally effective. In the first part of this paper, we summarize, what features an animation should have to be successfully used in education. We briefly mention Mayer’s principles of multimedia learning and the importance of interactivity in educational animations. In the next part of the paper, we describe how an interactive web-based 2D animation can be created. In the past, there were various technologies to create web animations, like Microsoft Silverlight or Adobe Flash. However, after the introduction of HTML5, Silverlight and Flash were gradually replaced by JavaScript, which is nowadays the most used technology for creating web-based interactive content. Even though, that creating interactive animations using the HTML5 and JavaScript languages needs good programming knowledge, there are several external libraries available on the internet to help the developers’ work. In the main part of this article, we compare two of these libraries, the Konva and Fabric JS. These two libraries are nowadays probably the most popular libraries for creating 2D interactive web-based animations. To compare these libraries in practice, we created the same educational web-based animation, a simple river crossing puzzle, with both of these libraries. According to our research, both of these libraries can be successfully used for creating educational web-based 2D animations. In the last part of this paper, we summarize the pros and cons of the reviewed JavaScript libraries and we draw our conclusions.

• Details
• Contents