mirror of
https://github.com/HeyPuter/puter
synced 2024-11-15 06:15:47 +00:00
111 lines
3.1 KiB
HTML
111 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Canvas Manipulation</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvasContainer {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
#controls {
|
||
|
|
position: fixed;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
z-index: 999;
|
||
|
|
background-color: #f1f1f1;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvasContainer canvas {
|
||
|
|
border: 1px solid #000;
|
||
|
|
margin-top: 10px;
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="controls">
|
||
|
|
<label for="width">Width:</label>
|
||
|
|
<input type="number" id="width" min="1">
|
||
|
|
<label for="height">Height:</label>
|
||
|
|
<input type="number" id="height" min="1">
|
||
|
|
<button onclick="createCanvas()">Create Canvas</button>
|
||
|
|
</div>
|
||
|
|
<div id="canvasContainer">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let canvasCount = 0;
|
||
|
|
|
||
|
|
function createCanvas() {
|
||
|
|
const width = document.getElementById("width").value;
|
||
|
|
const height = document.getElementById("height").value;
|
||
|
|
|
||
|
|
if (width <= 0 || height <= 0 || width >= 1080 || height >= 1920) {
|
||
|
|
alert("Please enter valid width and height values.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const canvasId = `canvas_${canvasCount}`;
|
||
|
|
const canvasContainer = document.getElementById("canvasContainer");
|
||
|
|
const canvas = document.createElement("canvas");
|
||
|
|
canvas.id = canvasId;
|
||
|
|
canvas.width = width;
|
||
|
|
canvas.height = height;
|
||
|
|
canvasContainer.appendChild(canvas);
|
||
|
|
|
||
|
|
const canvasControls = document.createElement("div");
|
||
|
|
canvasControls.classList.add("canvasControls");
|
||
|
|
|
||
|
|
const clearButton = document.createElement("button");
|
||
|
|
clearButton.textContent = "Clear";
|
||
|
|
clearButton.onclick = function() {
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
};
|
||
|
|
|
||
|
|
const pauseButton = document.createElement("button");
|
||
|
|
pauseButton.textContent = "Pause";
|
||
|
|
pauseButton.onclick = function() {
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
console.log("Pausing v86");
|
||
|
|
};
|
||
|
|
|
||
|
|
const consoleButton = document.createElement("button");
|
||
|
|
consoleButton.textContent = "Get console";
|
||
|
|
consoleButton.onclick = function() {
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
console.log("Getting v86 console");
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
};
|
||
|
|
|
||
|
|
const deleteButton = document.createElement("button");
|
||
|
|
deleteButton.textContent = "Delete";
|
||
|
|
deleteButton.onclick = function() {
|
||
|
|
canvas.remove();
|
||
|
|
canvasControls.remove();
|
||
|
|
};
|
||
|
|
|
||
|
|
canvasControls.appendChild(clearButton);
|
||
|
|
canvasControls.appendChild(deleteButton);
|
||
|
|
canvasControls.appendChild(pauseButton);
|
||
|
|
canvasControls.appendChild(consoleButton);
|
||
|
|
canvasContainer.appendChild(canvasControls);
|
||
|
|
canvasCount++;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|