<!DOCTYPE html>
<html>
<head>
<title>The few who are there before the bones get picked up.</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="160" height="160" style="border: 0px solid black;"></canvas>
<script>
// Function to draw the image on the canvas
function drawImageCenter(canvas, image) {
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
const imageWidth = image.width;
const imageHeight = image.height;
const x = (canvasWidth - imageWidth) / 2;
const y = (canvasHeight - imageHeight) / 2; // Adjust this value for vertical placement
const ctx = canvas.getContext('2d');
ctx.drawImage(image, x, y, imageWidth, imageHeight);
}
// Load the existing 100x100 image
const existingImage = new Image();
existingImage.src = '/content/6fb976ab49dcec017f1e201e84395983204ae1a7c2abf7ced0a85d692e442799i0';
// Create the 2000x2010 canvas
const canvas = document.getElementById('myCanvas');
// Wait for the image to load before drawing
existingImage.onload = function() {
// Scale the existing image to be 10 times larger
const scaledImage = new Image();
scaledImage.src = existingImage.src;
scaledImage.width = existingImage.width;
scaledImage.height = existingImage.height;
// Draw the scaled image on the canvas
drawImageCenter(canvas, scaledImage);
};
</script>
</body>
</html>