diff --git a/public/daemmerungszeiten.php b/public/daemmerungszeiten.php
index 2ded712..c4d46ad 100644
--- a/public/daemmerungszeiten.php
+++ b/public/daemmerungszeiten.php
@@ -365,20 +365,6 @@ body.daemmerungszeiten-page main > .container {
-
@@ -494,7 +480,6 @@ const fieldPreset = document.getElementById('presetLocation');
const fieldName = document.getElementById('locationName');
const fieldTimezone = document.getElementById('timezone');
const fieldYear = document.getElementById('yearSelect');
-const fieldCanvasQuality = document.getElementById('canvasQualitySelect');
const fieldOverlay = document.getElementById('lineOverlay');
const fieldPngScale = document.getElementById('pngScaleSelect');
const renderButton = document.getElementById('renderButton');
@@ -961,7 +946,7 @@ function readFormState() {
timeZone,
year,
stepMinutes,
- canvasQuality: Number(fieldCanvasQuality.value) || 1,
+ canvasQuality: 3,
pngScale: Number(fieldPngScale.value) || 1,
showLines: fieldOverlay.value === 'on'
};
@@ -1149,7 +1134,7 @@ async function buildChartData(state, token) {
};
}
-function drawChart(chart, targetContext = null, targetWidth = null, targetHeight = null, targetScale = null) {
+function drawChart(chart, targetContext = null, targetWidth = null, targetHeight = null, targetScale = null, backgroundFill = null) {
const context = targetContext || canvas.getContext('2d');
const width = targetWidth || canvas.clientWidth;
const height = targetHeight || canvas.clientHeight;
@@ -1167,6 +1152,11 @@ function drawChart(chart, targetContext = null, targetWidth = null, targetHeight
context.scale(pixelRatio, pixelRatio);
context.clearRect(0, 0, width, height);
+ if (backgroundFill) {
+ context.fillStyle = backgroundFill;
+ context.fillRect(0, 0, width, height);
+ }
+
const margin = { top: 22, right: 18, bottom: 48, left: 70 };
const plotWidth = Math.max(10, width - margin.left - margin.right);
const plotHeight = Math.max(10, height - margin.top - margin.bottom);
@@ -1208,9 +1198,11 @@ function drawChart(chart, targetContext = null, targetWidth = null, targetHeight
context.lineTo(x, margin.top + plotHeight);
context.stroke();
- const labelX = index === chart.monthBoundaries.length - 1
- ? margin.left + plotWidth - 10
- : x + 8;
+ const nextBoundary = chart.monthBoundaries[index + 1];
+ const startDay = boundary.dayIndex;
+ const endDay = nextBoundary ? nextBoundary.dayIndex : chart.totalDays;
+ const midDay = startDay + ((endDay - startDay) / 2);
+ const labelX = margin.left + (midDay / chart.totalDays) * plotWidth;
context.fillText(boundary.label.replace('.', ''), labelX, margin.top + plotHeight + 10);
});
@@ -1447,7 +1439,7 @@ function exportCurrentChartAsPng() {
const exportContext = exportCanvas.getContext('2d');
exportContext.scale(scale, scale);
- drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale);
+ drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale, '#121726');
exportCanvas.toBlob((blob) => {
if (!blob) {