This commit is contained in:
He4eT 2024-08-15 21:23:45 +02:00
commit 5a8128c25f
5 changed files with 42 additions and 49 deletions

View file

@ -1,9 +1,4 @@
# TODO
- Pointer events
- Popup (hide milje, open settings)
- Settings page
- Params: color, density
- Screenshots
- README
- Live reload

View file

@ -179,20 +179,27 @@ function getCanvas(size) {
/** @see https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas */
function scaleImageData(imageData, scale, ctx) {
const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale)
const scaled = ctx.createImageData(
imageData.width * scale,
imageData.height * scale,
)
const subLine = ctx.createImageData(scale, 1).data
for (let row = 0; row < imageData.height; row++) {
for (let col = 0; col < imageData.width; col++) {
const sourcePixel = imageData.data.subarray(
(row * imageData.width + col) * 4,
(row * imageData.width + col) * 4 + 4)
(row * imageData.width + col) * 4 + 4,
)
for (let x = 0; x < scale; x++) {
subLine.set(sourcePixel, x * 4)
}
for (let y = 0; y < scale; y++) {
const destRow = row * scale + y
const destCol = col * scale
scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)
scaled.data.set(
subLine,
(destRow * scaled.width + destCol) * 4,
)
}
}
}

View file

@ -8,29 +8,23 @@
body {
font-family: sans;
}
.form {
width: 100%;
}
.form hr {
margin: 16px 0;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
}
.form-group input, .form button {
display: block;
width: 100%;
box-sizing: border-box;
}
.color-slider {
width: 100%;
}

View file

@ -8,18 +8,15 @@
text-align: center;
font-family: sans;
}
main {
width: 200px;
}
button {
display: block;
box-sizing: border-box;
width: 100%;
margin: 8px 0;
}
</style>
</head>
<body>