CommitCanvas.

The picture is also the input.

Drawing, lettering, and presets all change the same grid. The preview stays close to the input, while the export makes the translation into code visible.

1. 01

   Keep the hand close to the result

   Painting changes the grid itself. Intensity, text, and preset patterns all write into the same surface, with undo keeping experimentation reversible.

2. 02

   Make the translation visible

   The export turns painted cells into dates and intensity levels, then produces Python or Node.js. The generated script can be read before it is run.

A square becomes a date.

Inside the export loop, the cell’s column and row determine its date. Empty cells are skipped; painted cells carry their intensity into the generated output.

const level = grid[day][week]
if (level > 0) {
  const date = new Date(startDate)
  date.setDate(date.getDate() + week * 7 + day)
  dates.push({ date: date.toISOString().split("T")[0], level })
}

Position → date

The week and day locate a square within the selected year’s grid.

Intensity → output

The stored level drives the number of dated commits in the generated script.