Blog

Canvas is not the problem, it’s math!

For developers the configurability of things is quite natural. And I wanted to leave different configurations open. Not many elements are needed with a Dot Calender: Circles and text. That’s it. So to start, set up a node project and install canvas:

npm install canvas --save

To draw a circle you use arc:

ctx.beginPath(); 
ctx.strokeStyle = this.properties.dots.dotStrikeColor; 
ctx.lineWidth = this.properties.dots.dotLineWidth; 
ctx.fillStyle = this.getFillColor(dotFlag); 
ctx.arc(x, y, radius, 0, Math.PI * 2, true); 
ctx.stroke(); 
ctx.fill(); 
ctx.closePath();

Adding a text is also very easy with fillText().

The art of this lies in mathematics:

• Number of circles per month
• Radius of the circles depending on the base area
• Basically distances (between circles, between texts, …) And there are some more configurations to consider. This is not about higher mathematics either, but the model has to be assembled nevertheless. To determine the x and y coordinates of the circles I used for example the following formula:

const x = startX + (month * textDistance + month * columns * (radius * 2 + distanceBetweenCirclesX) + column * (radius * 2 + distanceBetweenCirclesX)); 
const y = startY + day * (radius * 2 + distanceBetweenCirclesY);

With the help of configuration files most of the parameters I need can be adjusted. I am quite proud of the results :) Here you can find examples with different color schemes and different numbers of columns per month: The whole project can be found here. I still have a few ideas in my head that I would like to implement, but for now it has served its purpose. And I built my first useful project with canvas ;)