From 541b6c24b4791249d240d79db75410738ee8a9c1 Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Sat, 17 Apr 2021 17:39:23 +0200 Subject: [PATCH] improve puzzle cutting speed (not creating so many canvases --- game/PuzzleGraphics.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/game/PuzzleGraphics.js b/game/PuzzleGraphics.js index 59fdb65..e169ae8 100644 --- a/game/PuzzleGraphics.js +++ b/game/PuzzleGraphics.js @@ -80,13 +80,18 @@ async function createPuzzleTileBitmaps(img, tiles, info) { return path } + const c = Graphics.createCanvas(tileDrawSize, tileDrawSize) + const ctx = c.getContext('2d') + + const c2 = Graphics.createCanvas(tileDrawSize, tileDrawSize) + const ctx2 = c2.getContext('2d') + for (let t of tiles) { const tile = Util.decodeTile(t) const srcRect = srcRectByIdx(info, tile.idx) const path = pathForShape(Util.decodeShape(info.shapes[tile.idx])) - const c = Graphics.createCanvas(tileDrawSize, tileDrawSize) - const ctx = c.getContext('2d') + ctx.clearRect(0, 0, tileDrawSize, tileDrawSize) // stroke (slightly darker version of image) // ----------------------------------------------------------- @@ -162,8 +167,7 @@ async function createPuzzleTileBitmaps(img, tiles, info) { // ----------------------------------------------------------- // ----------------------------------------------------------- - const tmpc = Graphics.createCanvas(tileDrawSize, tileDrawSize) - const ctx2 = tmpc.getContext('2d') + ctx2.clearRect(0, 0, tileDrawSize, tileDrawSize) ctx2.save() ctx2.lineWidth = 1 ctx2.stroke(path) @@ -180,15 +184,7 @@ async function createPuzzleTileBitmaps(img, tiles, info) { tileDrawSize + 100, ) ctx2.restore() - // ctx2.save() - // ctx2.globalCompositeOperation = 'source-in' - // ctx2.globalAlpha = .1 - // ctx2.fillStyle = 'black' - // ctx2.fillRect(0,0, c.width, c.height) - // ctx2.restore() - // ctx.globalCompositeOperation = 'darken' - ctx.drawImage(tmpc, 0, 0) - + ctx.drawImage(c2, 0, 0) bitmaps[tile.idx] = await createImageBitmap(c) }