game stuff

game/Graphics.js

@@ -1,7 +1,7 @@
 function createCanvas(width = 0, height = 0) {
     const c = document.createElement('canvas')
-    c.width = width === 0 ? window.innerWidth : width
-    c.height = height === 0 ? window.innerHeight : height
+    c.width = width
+    c.height = height
     return c
 }
 
@@ -29,9 +29,26 @@ async function createBitmap(width, height, color) {
   return await createImageBitmap(c)
 }
 
+async function colorize(image, mask, color) {
+  const c = createCanvas(image.width, image.height)
+  const ctx = c.getContext('2d')
+  ctx.save()
+  ctx.drawImage(mask, 0, 0)
+  ctx.fillStyle = color
+  ctx.globalCompositeOperation = "source-in"
+  ctx.fillRect(0, 0, mask.width, mask.height)
+  ctx.restore()
+  ctx.save()
+  ctx.globalCompositeOperation = "destination-over"
+  ctx.drawImage(image, 0, 0)
+  ctx.restore()
+  return await createImageBitmap(c)
+}
+
 export default {
   createBitmap,
   createCanvas,
   loadImageToBitmap,
   resizeBitmap,
+  colorize,
 }