CTP431 Final Project: Canvas Loop

20173249 Chae Lin Park


1. Introduction

People usually think that composing is really hard and complicated but I think we can write songs with the combination of notes and rhythm. I decided to make online composing site with easier and more interesing way.



2. Components

  • Canvas

You can make your own song in this space. You can draw the white space which you can place the instument icons.


  • Brush Tool

If you click brush tool, the icon color turns gray and you can draw the white space on the canvas.



  • Instrument Tool

There are three kinds of instrument: synthesizer, bass, percussion. If you click the tool icon, you can select the color(red, yellow, green, blue, purple) and direction(black). After selecting color and direction, you can place the icon on the white space with one mouse click. If you change the icon color, you can change the note of each icon. Each color corresponds to the pentatonic major scale.



  • Play/Pause

If you press the play button, you can play or pause you own song.


  • Reset

If you press the stop buttion, all elements on canvas will be erased.


3. Codes

  • index.html
  • final.html
  • final.js

Go to play "Canvas Loop"