Commit 774d33d7 authored by Tomáš Hübelbauer's avatar Tomáš Hübelbauer

Fix canvas jumping and give channels different colors

parent 334dc265
......@@ -7,6 +7,7 @@ body {
display: flex;
flex: 1;
flex-direction: column;
margin: 0;
}
#head {
......@@ -15,14 +16,16 @@ body {
#timeInput {
flex: 1;
margin: 0;
}
#body {
background: black;
display: flex;
flex: 1;
}
#renderCanvas {
background: black;
width: 100%;
height: 100%;
}
......@@ -123,42 +123,46 @@ function* getTempos(track) {
}
}
const channelColors = [
undefined,
'#abcdef',
'#fedcba',
];
// https://stackoverflow.com/a/23071105/2715716
// TODO: Accept tempo changes and reflect that in time
// TODO: Give each channel a different color
// TODO: Adapt `canvas` size to window (put in flex and use computed dimensions to set canvas context dimensions)
// TODO: Resize with `window.onresize`
// TODO: Reflect tempo changes in time
function render(canvas, channels, tempos, time) {
const width = 768;
const height = 576;
canvas.width = 768;
canvas.height = 576;
const { width, height } = canvas.getBoundingClientRect();
const top = height + time;
const unit = width / 100;
// Apply the implicit dimensions so that context dimensions match.
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.fillRect(0, 0, width, height);
const top = height + time;
const bottom = time;
let channelNumber = 0;
for (const notes of channels) {
channelNumber++;
// Draw all fill first so that they do not overlap any strokes
context.fillStyle = 'rgb(128, 128, 128)';
context.fillStyle = channelColors[channelNumber];
for (const note of notes) {
const { x, y, w, h } = getNoteXYWH(note, 5, top);
const { x, y, w, h } = getNoteXYWH(note, unit, top);
if (y + h < 0 || y > height) continue;
context.fillRect(x, y, w, h);
}
// Draw all strokes second so they are not overlapped by any fills
let counter = 0;
let noteNumber = 0;
context.strokeStyle = 'rgb(255, 255, 255)';
for (const note of notes) {
counter++;
const { x, y, w, h } = getNoteXYWH(note, 5, top);
noteNumber++;
const { x, y, w, h } = getNoteXYWH(note, unit, top);
if (y + h <= 0 || y > height) continue;
context.strokeRect(x, y, w, h);
context.fillText(`#${counter}: ${note.no}`, x + w, y + h);
context.fillText(`#${noteNumber}: ${note.no}`, x + w, y + h);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment