sketchout a canvas applet
This commit is contained in:
parent
a7300c16b7
commit
d106823e19
2 changed files with 36 additions and 0 deletions
11
island.html
Normal file
11
island.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>ProcGen Island</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="js/island.js"></script>
|
||||
<script>
|
||||
document.body.append(...IslandApplet());
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
25
island.ts
Normal file
25
island.ts
Normal file
|
@ -0,0 +1,25 @@
|
|||
const BLOWUP = 4;
|
||||
const WIDTH = 240;
|
||||
const HEIGHT = 135;
|
||||
|
||||
export function IslandApplet() {
|
||||
const canvas = Object.assign(document.createElement("canvas"), {
|
||||
width: WIDTH * BLOWUP,
|
||||
height: HEIGHT * BLOWUP,
|
||||
} satisfies Partial<HTMLCanvasElement>);
|
||||
|
||||
const cx = canvas.getContext("2d");
|
||||
if (!cx) {
|
||||
throw new Error("2D rendering context not supported");
|
||||
}
|
||||
cx.scale(BLOWUP, BLOWUP);
|
||||
|
||||
cx.fillStyle = "red";
|
||||
cx.fillRect(0, 0, WIDTH, HEIGHT);
|
||||
cx.fillStyle = "blue";
|
||||
cx.fillRect(1, 1, WIDTH - 2, HEIGHT - 2);
|
||||
|
||||
return [canvas];
|
||||
}
|
||||
|
||||
(globalThis as any).IslandApplet = IslandApplet;
|
Loading…
Add table
Reference in a new issue