pixel-editor/poc_pages/tiny_text.html
pxlvxl a1757553cf Various changes
- added `/:paletteSlug/:resolution` functionality for localhost testing
	- created `currFile.sublayers` for *things that should zoom with the canvas layers*
	- `currFile.layers` now solely contains the canvas layers
	- added `getProjectData` to `FileManager`'s exported methods
	---
	- added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData()))
	- added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageReset` (for debugging purity)
	---
	- calling `FileManager.localStorageSave()` on mouse up (we should stress test this)
	---
	- changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}`
	- added backward compatibility for the old lpe file format
	---
	- added some canvas utility functions in `canvas_util`
	- added Unsettled's color similarity utility functions in `color_util2`
	---
	- html boilerplate - wang tiles
	-
	- POC - tiny text boilerplate
	- POC - tiny text font scraper
	---
	- WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr`
	- WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)
2022-02-23 11:16:23 -05:00

46 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="chaotic_good"></canvas>
<canvas id="neutral_good"></canvas>
<canvas id="lawful_good"></canvas>
<canvas id="chaotic_neutral"></canvas>
<canvas id="true_neutral"></canvas>
<canvas id="lawful_neutral"></canvas>
<canvas id="chaotic_evil"></canvas>
<canvas id="neutral_evil"></canvas>
<canvas id="lawful_evil"></canvas>
</body>
</html>
<script src="/js/canvas_util.js"></script>
<script src="/js/color_utils.js"></script>
<script>
const canvas = document.createElement('canvas');
const w = 256;
const h = 256;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0,0,w,h);
ctx.fillStyle = 'red';
ctx.fillRect(1,1,w-2,h-2);
canvas.style.imageRendering = "pixelated";
canvas.style.transform = `scale(4)`;
canvas.style.position = "fixed";
canvas.style.top = "calc(50% - "+(h/2)+"px)";
canvas.style.left = "calc(50% - "+(w/2)+"px)";
document.body.appendChild(canvas);
ctx.fillStyle = 'black';
drawTinyText(ctx, "HELLO", 7, 7, "monospace");
</script>