jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

删除绘图模式

Browse Source
This commit is contained in:
ckcz123 2020-05-05 20:48:18 +08:00
parent 4003eb71d0
commit 9c04714f9a
15 changed files with 26 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
API列表.txt
View File

@ -1889,8 +1889,8 @@ core.drawStatistics()
绘制数据统计。将从脚本编辑中获得要统计的数据列表，再遍历所有地图进行统计。
core.drawAbout() / core.drawPaint() / core.drawHelp()
绘制关于界面，绘图模式，帮助界面。
core.drawAbout() / core.drawHelp()
绘制关于界面，帮助界面。
// ------ 动态创建画布相关的API ------ //
@ -2100,10 +2100,6 @@ core.encodeBase64(str) / core.decodeBase64(str)
可用于解压缩录像数据
core.convertBase(str, fromBase, toBase)
任意进制转换。此函数可能执行的非常慢，慎用。
core.rand(num)
使用伪种子生成伪随机数。该随机函数能被录像支持。
num如果设置大于0，则生成一个[0, num-1]之间的数；否则生成一个0到1之间的浮点数。

8
_docs/api.md
View File

@ -1894,8 +1894,8 @@ core.drawStatistics()
绘制数据统计。将从脚本编辑中获得要统计的数据列表，再遍历所有地图进行统计。
core.drawAbout() / core.drawPaint() / core.drawHelp()
绘制关于界面，绘图模式，帮助界面。
core.drawAbout() / core.drawHelp()
绘制关于界面，帮助界面。
// ------ 动态创建画布相关的API ------ //
@ -2105,10 +2105,6 @@ core.encodeBase64(str) / core.decodeBase64(str)
可用于解压缩录像数据
core.convertBase(str, fromBase, toBase)
任意进制转换。此函数可能执行的非常慢，慎用。
core.rand(num)
使用伪种子生成伪随机数。该随机函数能被录像支持。
num如果设置大于0，则生成一个[0, num-1]之间的数；否则生成一个0到1之间的浮点数。

15
_docs/element.md
View File

@ -416,20 +416,6 @@ HTML5魔塔一大亮点就是存在录像系统，可以很方便进行录像回
如果录像出现问题，请加群539113091找小艾反馈Bug。
## 绘图模式
从V2.5开始，样板提供了绘图模式，可以让玩家在画布上任意进行绘制，标记等。
使用M键，或在菜单栏中可以进入绘图模式。
**绘图的内容会自动保存，且以页面为生命周期，和存读档无关，返回标题并重新开始游戏后绘制的内容仍有效，但刷新页面就会消失。**
你可以将绘制内容保存到文件，也可以从文件读取保存的绘制内容。
绘图模式下，状态栏的图标也会相应改变，铅笔为绘制模式，橡皮为擦除模式，存读档为保存和读取绘图文件，退出为返回默认值。
在浏览地图页面中也可以按楼传按钮或M键来开启/关闭该层的绘图显示。
## 操作说明
![](img/keyboard.png)
@ -463,7 +449,6 @@ HTML5魔塔一大亮点就是存在录像系统，可以很方便进行录像回
- **[R]** 回放录像
- **[E]** 显示光标
- **[SPACE]** 轻按（仅在轻按开关打开时有效）
- **[M]** 绘图模式
- **[PgUp/PgDn]** 浏览地图
- **[1]** 快捷使用破墙镐
- **[2]** 快捷使用炸弹/圣锤

1
_docs/personalization.md
View File

@ -19,7 +19,6 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
- animate：动画层；主要用来绘制动画。 (z-index: 70)
- weather**[D]**：天气层；主要用来绘制天气（雨/雪/雾） (z-index: 80)
- route**[D]**：路线层；主要用来绘制勇士的行走路线图。 (z-index: 95)
- paint**[D]**：绘图层；主要用来进行绘图模式。（z-index: 95)
- curtain：色调层；用来控制当前楼层的画面色调 (z-index: 125)
- image1\~50**[D]**：图片层；用来绘制图片等操作。（z-index: 100+code, 101~150）
- uievent**[D]**：自定义UI绘制层；用来进行自定义UI绘制等操作。（z-index：135，可以通过事件设置该值）

154
libs/actions.js
View File

@ -38,17 +38,14 @@ actions.prototype._init = function () {
this.registerAction('keyUp', '_sys_keyUp', this._sys_keyUp, 0);
// --- ondown注册
this.registerAction('ondown', '_sys_checkReplay', this._sys_checkReplay, 100);
this.registerAction('ondown', '_sys_ondown_paint', this._sys_ondown_paint, 60);
this.registerAction('ondown', '_sys_ondown_lockControl', this._sys_ondown_lockControl, 30);
this.registerAction('ondown', '_sys_ondown', this._sys_ondown, 0);
// --- onmove注册
this.registerAction('onmove', '_sys_checkReplay', this._sys_checkReplay, 100);
this.registerAction('onmove', '_sys_onmove_paint', this._sys_onmove_paint, 50);
this.registerAction('onmove', '_sys_onmove_choices', this._sys_onmove_choices, 30);
this.registerAction('onmove', '_sys_onmove', this._sys_onmove, 0);
// --- onup注册
this.registerAction('onup', '_sys_checkReplay', this._sys_checkReplay, 100);
this.registerAction('onup', '_sys_onup_paint', this._sys_onup_paint, 50);
this.registerAction('onup', '_sys_onup', this._sys_onup, 0);
// --- onclick注册
this.registerAction('onclick', '_sys_checkReplay', this._sys_checkReplay, 100);
@ -400,9 +397,6 @@ actions.prototype._sys_keyUp_lockControl = function (keyCode, altKey) {
case 'centerFly':
this._keyUpCenterFly(keyCode);
break;
case 'paint':
this._keyUpPaint(keyCode);
break;
}
return true;
}
@ -425,14 +419,6 @@ actions.prototype.ondown = function (loc) {
this.doRegisteredAction('ondown', x, y, px, py);
}
actions.prototype._sys_ondown_paint = function (x, y, px, py) {
// 画板
if (core.status.played && (core.status.event || {}).id == 'paint') {
this._ondownPaint(px, py);
return true;
}
}
actions.prototype._sys_ondown_lockControl = function (x, y, px, py) {
if (core.status.played && !core.status.lockControl) return false;
@ -484,14 +470,6 @@ actions.prototype.onmove = function (loc) {
this.doRegisteredAction('onmove', x, y, px, py);
}
actions.prototype._sys_onmove_paint = function (x, y, px, py) {
// 画板
if (core.status.played && (core.status.event || {}).id == 'paint') {
core.actions._onmovePaint(px, py);
return true;
}
}
actions.prototype._sys_onmove_choices = function (x, y) {
if (!core.status.lockControl) return false;
@ -546,14 +524,6 @@ actions.prototype.onup = function (loc) {
this.doRegisteredAction('onup', x, y, px, py);
}
actions.prototype._sys_onup_paint = function () {
// 画板
if (core.status.played && (core.status.event || {}).id == 'paint') {
this._onupPaint();
return true;
}
}
actions.prototype._sys_onup = function () {
clearTimeout(core.timeout.onDownTimeout);
core.timeout.onDownTimeout = null;
@ -1222,11 +1192,6 @@ actions.prototype._clickViewMaps = function (x, y) {
core.ui.drawMaps(index, cx, cy);
return;
}
if (x <= per - 2 && y >= this.SIZE + 1 - per) {
core.status.event.data.paint = !core.status.event.data.paint;
core.ui.drawMaps(index, cx, cy);
return;
}
if (x >= this.SIZE + 1 - per && y <= per - 2) {
core.status.event.data.all = !core.status.event.data.all;
core.ui.drawMaps(index, cx, cy);
@ -1310,11 +1275,6 @@ actions.prototype._keyUpViewMaps = function (keycode) {
core.ui.drawMaps(core.status.event.data);
return;
}
if (keycode == 77) {
core.status.event.data.paint = !core.status.event.data.paint;
core.ui.drawMaps(core.status.event.data);
return;
}
if (keycode == 88 || (core.isReplaying() && keycode == 67)) {
if (core.isReplaying()) {
core.bookReplay();
@ -2122,20 +2082,16 @@ actions.prototype._clickSettings = function (x, y) {
core.ui.drawMaps();
break;
case 3:
core.clearUI();
core.ui.drawPaint();
break;
case 4:
core.status.event.selection = 0;
core.ui.drawSyncSave();
break;
case 5:
case 4:
core.status.event.selection = 0;
core.ui.drawGameInfo();
break;
case 6:
case 5:
return core.confirmRestart();
case 7:
case 6:
core.ui.closePanel();
break;
}
@ -2628,107 +2584,3 @@ actions.prototype._keyUpCursor = function (keycode) {
return;
}
}
////// 绘图相关 //////
actions.prototype._ondownPaint = function (x, y) {
x += core.bigmap.offsetX;
y += core.bigmap.offsetY;
if (!core.status.event.data.erase) {
core.dymCanvas.paint.beginPath();
core.dymCanvas.paint.moveTo(x, y);
}
core.status.event.data.x = x;
core.status.event.data.y = y;
}
actions.prototype._onmovePaint = function (x, y) {
if (core.status.event.data.x == null) return;
x += core.bigmap.offsetX;
y += core.bigmap.offsetY;
if (core.status.event.data.erase) {
core.clearMap('paint', x - 10, y - 10, 20, 20);
return;
}
var midx = (core.status.event.data.x + x) / 2, midy = (core.status.event.data.y + y) / 2;
core.dymCanvas.paint.quadraticCurveTo(midx, midy, x, y);
core.dymCanvas.paint.stroke();
core.status.event.data.x = x;
core.status.event.data.y = y;
}
actions.prototype._onupPaint = function () {
core.status.event.data.x = null;
core.status.event.data.y = null;
// 保存
core.paint[core.status.floorId] = lzw_encode(core.utils._encodeCanvas(core.dymCanvas.paint).join(","));
}
actions.prototype.setPaintMode = function (mode) {
if (mode == 'paint') core.status.event.data.erase = false;
else if (mode == 'erase') core.status.event.data.erase = true;
else return;
core.drawTip("进入" + (core.status.event.data.erase ? "擦除" : "绘图") + "模式");
}
actions.prototype.clearPaint = function () {
core.clearMap('paint');
delete core.paint[core.status.floorId];
core.drawTip("已清空绘图内容");
}
actions.prototype.savePaint = function () {
var data = {};
for (var floorId in core.paint) {
if (core.paint[floorId])
data[floorId] = lzw_decode(core.paint[floorId]);
}
core.download(core.firstData.name + ".h5paint", JSON.stringify({
'name': core.firstData.name,
'paint': data
}));
}
actions.prototype.loadPaint = function () {
core.readFile(function (obj) {
if (obj.name != core.firstData.name) {
alert("绘图文件和游戏不一致！");
return;
}
if (!obj.paint) {
alert("无效的绘图文件！");
return;
}
core.paint = {};
for (var floorId in obj.paint) {
if (obj.paint[floorId])
core.paint[floorId] = lzw_encode(obj.paint[floorId]);
}
core.clearMap('paint');
var value = core.paint[core.status.floorId];
if (value) value = lzw_decode(value).split(",");
core.utils._decodeCanvas(value, 32 * core.bigmap.width, 32 * core.bigmap.height);
core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
core.drawTip("读取绘图文件成功");
})
}
actions.prototype.exitPaint = function () {
core.deleteCanvas('paint');
core.ui.closePanel();
core.statusBar.image.keyboard.style.opacity = 1;
core.statusBar.image.shop.style.opacity = 1;
core.drawTip("退出绘图模式");
}
actions.prototype._keyUpPaint = function (keycode) {
if (keycode == 27 || keycode == 88 || keycode == 77 || keycode == 13 || keycode == 32 || keycode == 67) {
this.exitPaint();
return;
}
}
////// 绘图相关 END //////

2
libs/control.js
View File

@ -294,7 +294,7 @@ control.prototype._animateFrame_tip = function (timestamp) {
core.setFont('data', "16px Arial");
core.setTextAlign('data', 'left');
core.clearMap('data', 0, 0, this.PIXEL, 50);
core.clearMap('data', 0, 0, core.__PIXELS__, 50);
core.ui._drawTip_drawOne(tip);
if (tip.stage == 1) {
tip.opacity += 0.05;

1
libs/core.js
View File

@ -96,7 +96,6 @@ function core() {
height: this.__SIZE__,
tempCanvas: null, // A temp canvas for drawing
}
this.paint = {};
this.saves = {
"saveIndex": null,
"ids": {},

68
libs/ui.js
View File

@ -500,6 +500,11 @@ ui.prototype._drawTip_drawOne = function (tip) {
core.setAlpha('data', 1);
}
ui.prototype.clearTip = function () {
core.clearMap('data', 0, 0, this.PIXEL, 50);
core.animateFrame.tip = null;
}
////// 地图中间绘制一段文字 //////
ui.prototype.drawText = function (contents, callback) {
if (contents != null) return this._drawText_setContent(contents, callback);
@ -1509,7 +1514,7 @@ ui.prototype.drawSwitchs = function() {
ui.prototype.drawSettings = function () {
core.status.event.id = 'settings';
this.drawChoices(null, [
"系统设置", "虚拟键盘", "浏览地图", "绘图模式", "同步存档", "游戏信息", "返回标题", "返回游戏"
"系统设置", "虚拟键盘", "浏览地图", "同步存档", "游戏信息", "返回标题", "返回游戏"
]);
}
@ -2040,15 +2045,6 @@ ui.prototype.drawMaps = function (index, x, y) {
var data = this._drawMaps_buildData(index, x, y);
core.drawThumbnail(data.floorId, null, {damage: data.damage},
{ctx: 'ui', centerX: data.x, centerY: data.y, all: data.all});
// 绘图
if (data.paint) {
var offsetX = 32 * (data.x - this.HSIZE), offsetY = 32 * (data.y - this.HSIZE);
var value = core.paint[data.floorId];
if (value) value = lzw_decode(value).split(",");
core.utils._decodeCanvas(value, 32 * data.mw, 32 * data.mh);
core.drawImage('ui', core.bigmap.tempCanvas.canvas, offsetX * 32, offsetY * 32,
this.PIXEL, this.PIXEL, 0, 0, this.PIXEL, this.PIXEL);
}
core.clearMap('data');
core.setTextAlign('data', 'left');
core.setFont('data', '16px Arial');
@ -2075,14 +2071,13 @@ ui.prototype._drawMaps_drawHint = function () {
stroke(per, this.SIZE - per - 3, 9, 3); // next
stroke(0, 0, per-1, per-1); // left top
stroke(this.SIZE-(per - 1), 0, per-1, per-1); // right top
stroke(0, this.SIZE-(per-1), per-1, per-1); // left bottom
// stroke(0, this.SIZE-(per-1), per-1, per-1); // left bottom
core.setTextBaseline('ui', 'middle');
core.fillText('ui', "上移地图 [W]", this.HPIXEL, per * 16, '#FFD700', '20px Arial');
core.fillText('ui', "下移地图 [S]", this.HPIXEL, this.PIXEL - per * 16);
core.fillText('ui', 'V', (per-1)*16, (per-1)*16);
core.fillText('ui', 'Z', this.PIXEL - (per-1)*16, (per-1)*16);
core.fillText('ui', 'M', (per-1)*16, this.PIXEL - (per-1)*16);
var top = this.HPIXEL - 66, left = per * 16, right = this.PIXEL - left;
var lt = ["左", "移", "地", "图", "[A]"], rt = ["右", "移", "地", "图", "[D]"];
@ -2101,10 +2096,8 @@ ui.prototype._drawMaps_drawHint = function () {
ui.prototype._drawMaps_buildData = function (index, x, y) {
var damage = (core.status.event.data||{}).damage;
var paint = (core.status.event.data||{}).paint;
var all = (core.status.event.data||{all: true}).all;
if (index.damage != null) damage=index.damage;
if (index.paint != null) paint=index.paint;
if (index.all != null) all=index.all;
if (index.index != null) { x=index.x; y=index.y; index=index.index; }
index = core.clamp(index, 0, core.floorIds.length-1);
@ -2117,7 +2110,7 @@ ui.prototype._drawMaps_buildData = function (index, x, y) {
y = core.clamp(y, this.HSIZE, mh - this.HSIZE - 1);
core.status.event.data = {index: index, x: x, y: y, floorId: floorId, mw: mw, mh: mh,
damage: damage, paint: paint, all: all };
damage: damage, all: all };
return core.status.event.data;
}
@ -2791,47 +2784,6 @@ ui.prototype.drawAbout = function () {
return this.uidata.drawAbout();
}
////// 绘制“画图”界面 //////
ui.prototype.drawPaint = function () {
core.drawText(
"\t[进入绘图模式]你可以在此页面上任意进行绘图和标记操作。\nM键可以进入或退出此模式。\n\n"+
"绘图的内容会自动保存，且以页面为生命周期，和存读档无关，重新开始游戏或读档后绘制的内容仍有效，但刷新页面就会消失。\n"+
"你可以将绘制内容保存到文件，也可以从文件读取保存的绘制内容。\n"+
"浏览地图页面可以按楼传按钮或M键来开启/关闭该层的绘图显示。\n\n更多功能请详见文档-元件-绘图模式。",
this._drawPaint_draw
);
}
ui.prototype._drawPaint_draw = function () {
core.drawTip("打开绘图模式，现在可以任意在界面上绘图标记");
core.lockControl();
core.status.event.id = 'paint';
core.status.event.data = {"x": null, "y": null, "erase": false};
core.clearUI();
core.createCanvas('paint', -core.bigmap.offsetX, -core.bigmap.offsetY, 32*core.bigmap.width, 32*core.bigmap.height, 95);
// 将已有的内容绘制到route上
var value = core.paint[core.status.floorId];
if (value) value = lzw_decode(value).split(",");
core.utils._decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
core.drawImage('paint', core.bigmap.tempCanvas.canvas, 0, 0);
core.setLineWidth('paint', 3);
core.setStrokeStyle('paint', '#FF0000');
core.statusBar.image.keyboard.style.opacity = 0;
core.statusBar.image.shop.style.opacity = 0;
core.statusBar.image.book.src = core.statusBar.icons.paint.src;
core.statusBar.image.fly.src = core.statusBar.icons.erase.src;
core.statusBar.image.toolbox.src = core.statusBar.icons.empty.src;
core.statusBar.image.settings.src = core.statusBar.icons.exit.src;
core.statusBar.image.book.style.opacity = 1;
core.statusBar.image.fly.style.opacity = 1;
}
////// 绘制帮助页面 //////
ui.prototype.drawHelp = function () {
core.clearUI();
@ -2847,12 +2799,12 @@ ui.prototype.drawHelp = function () {
"\t[键盘快捷键列表]"+
"[CTRL] 跳过对话 [Z] 转向\n" +
"[X] 怪物手册 [G] 楼层传送\n" +
"[A] 读取自动存档 [S/D] 存读档页面\n" +
"[A] 读取自动存档 [W] 撤销读取自动存档\n" +
"[S/D] 存读档页面 [SPACE] 轻按\n" +
"[V] 快捷商店 [ESC] 系统菜单\n" +
"[T] 道具页面 [Q] 装备页面\n" +
"[B] 数据统计 [H] 帮助页面\n" +
"[R] 回放录像 [E] 显示光标\n" +
"[SPACE] 轻按 [M] 绘图模式\n" +
"[N] 返回标题页面 [P] 游戏主页\n" +
"[O] 查看工程 [F7] 打开debug穿墙模式\n" +
"[PgUp/PgDn] 浏览地图\n"+

20
libs/utils.js
View File

@ -713,26 +713,6 @@ utils.prototype.decodeBase64 = function (str) {
}).join(''));
}
////// 任意进制转换 //////
utils.prototype.convertBase = function (str, fromBase, toBase) {
var map = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~`!@#$%^&*()_-+={}[]\\|:;<>,.?/";
if (fromBase == toBase) return str;
var len = str.length, ans = "";
var t = [];
for (var i = 0; i < len; i++) t[i] = map.indexOf(str.charAt(i));
t[len] = 0;
while (len > 0) {
for (var i = len; i >= 1; i--) {
t[i - 1] += t[i] % toBase * fromBase;
t[i] = parseInt(t[i] / toBase);
}
ans += map.charAt(t[0] % toBase);
t[0] = parseInt(t[0] / toBase);
while (len > 0 && t[len - 1] == 0) len--;
}
return ans;
}
utils.prototype.rand = function (num) {
var rand = core.getFlag('__rand__');
rand = this.__next_rand(rand);

51
main.js
View File

@ -149,18 +149,14 @@ function main() {
'equipbox': 24,
'mana': 25,
'skill': 26,
'paint': 27,
'erase': 28,
'empty': 29,
'exit': 30,
'btn1': 31,
'btn2': 32,
'btn3': 33,
'btn4': 34,
'btn5': 35,
'btn6': 36,
'btn7': 37,
'btn8': 38
'btn1': 27,
'btn2': 28,
'btn3': 29,
'btn4': 30,
'btn5': 31,
'btn6': 32,
'btn7': 33,
'btn8': 34
},
'floor': document.getElementById('floor'),
'name': document.getElementById('name'),
@ -536,11 +532,6 @@ main.statusBar.image.book.onclick = function (e) {
return;
}
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.setPaintMode('paint');
return;
}
if (main.core.isPlaying())
main.core.openBook(true);
}
@ -555,12 +546,6 @@ main.statusBar.image.fly.onclick = function (e) {
return;
}
// 绘图模式
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.setPaintMode('erase');
return;
}
if (main.core.isPlaying()) {
if (!main.core.flags.equipboxButton) {
main.core.useFly(true);
@ -580,11 +565,6 @@ main.statusBar.image.toolbox.onclick = function (e) {
return;
}
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.clearPaint();
return;
}
if (main.core.isPlaying()) {
main.core.openToolbox(core.status.event.id != 'equipbox');
}
@ -646,11 +626,6 @@ main.statusBar.image.save.onclick = function (e) {
return;
}
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.savePaint();
return;
}
if (main.core.isPlaying())
main.core.save(true);
}
@ -664,11 +639,6 @@ main.statusBar.image.load.onclick = function (e) {
return;
}
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.loadPaint();
return;
}
if (main.core.isPlaying())
main.core.load(true);
}
@ -682,11 +652,6 @@ main.statusBar.image.settings.onclick = function (e) {
return;
}
if (main.core.isPlaying() && (core.status.event||{}).id=='paint') {
core.actions.exitPaint();
return;
}
if (main.core.isPlaying())
main.core.openSettings(true);
}

4
project/functions.js
View File

@ -832,7 +832,6 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
case 90: // Z：转向
core.turnHero();
break;
case 75:
case 86: // V：打开快捷商店列表
core.openQuickShop(true);
break;
@ -846,9 +845,6 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a =
case 34: // PgUp/PgDn：浏览地图
core.ui.drawMaps();
break;
case 77: // M：绘图模式
core.ui.drawPaint();
break;
case 66: // B：打开数据统计
core.ui.drawStatistics();
break;

BIN
project/images/icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
project/images/keyboard.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 75 KiB

0
project/images/npc48.png Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

1
runtime.d.ts vendored
View File

@ -1880,7 +1880,6 @@ type core = {
height: number
tempCanvas: CanvasRenderingContext2D // A temp canvas for drawing
}
paint: {};
saves: {
saveIndex: number
ids: { [key: number]: boolean }