Developing Pixel.js

Pixel.js has its own set of vocabulary often carried over from Diva.js. This section explores the important terms and introduces how the main functionalities of Pixel are implemented.

In this wiki, the plugin as a whole is referred to as Pixel.js with a capital "P." The Pixel.js/source/pixel.js file is the main source file and is referred to as pixel.js.

Layering System

Pixel's main functionality in the bigger SIMSSA workflow is the ability to have layers in order to create ground-truths for OMR processes.

Pixel creates a set amount of canvases on top of the original background rendered by Diva.js. Through the cloneCanvas method, it creates empty canvases that are the same size as the Diva background. Each created canvas is a new layer. These layers are identified by a layerId integer. The id attribute itself is named in the same way as Diva.js elements are identified. In the layers' case, it is layer-1-canvas for Layer 1, layer-2-canvas for Layer 2, and so on.

All shapes and paths are appended to each their specific layer with ES6's push function.

See the layer.js section of the wiki for more detailed information about its methods and how it interacts with pixel.js.

Shapes & Paths

All paint tools in Pixel.js currently rely on the shape.js, as paths are generated from shapes appended to each other. Namely, multiple combinations of two circles with a polygon fill applied on computed tangents between two circles (see line.js).

Shapes

Shapes include rectangles, circles, and all forms that are a set shape created on click and drag. They are stored in an array of Shape objects.

Rectangle

Rectangles are implemented by specifying their x and y offsets and their width and height, and then using canvas' fillRect method to fill in the shape with colour.

Paths

Paths include any line drawn by the brush tool as well as any line drawn by the erase tool. They are all stored in an array of Path objects.

Brush

Circles scaled to brush size level.

Erase

The eraser tool is implemented as a brush that masks anything it passes through by filling the brush path with an "opaque clear fill". The erase tool does not remove the paths that were drawn but instead covers them with the background.

Viewport & Page

The viewport is known as the whole Diva.js window within the browser. A page refers more specifically to the rendered canvas tiles within the viewport that constitute a page of the loaded background image.