1 files changed, 42 insertions, 22 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 3e185d2..07e2d9f 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -10,7 +10,7 @@ Map.Draw = function(map, opt){
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
-		// draw.ruler()
+		draw.fill("rgba(255,255,255,0.98)")
 
 		if (opt.minimap) {
 			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
@@ -19,7 +19,7 @@ Map.Draw = function(map, opt){
 			ctx.scale( -1, 1 )
 
 			draw.coords()
-			draw.regions(Rooms.regions, [ "#fff" ])
+			draw.regions(Rooms.regions, [ "#fff" ], "#000")
 			draw.camera(scene.camera)
 		}
 		
@@ -29,7 +29,7 @@ Map.Draw = function(map, opt){
 			ctx.translate( map.center.a,  map.center.b )
 			ctx.scale( -1, 1 )
 
-			draw.regions(Rooms.regions, [ "#f8f8f8" ])
+			draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
 			draw.mouse(map.ui.mouse.cursor)
 			draw.coords()
 			scene && draw.camera(scene.camera)
@@ -39,7 +39,12 @@ Map.Draw = function(map, opt){
 	}
 
 	draw.render = function(){
-		ctx.save()
+		// change the ctx temporarily
+		var canvas = document.createElement("canvas")
+		ctx = canvas.getContext('2d')
+		canvas.width = map.canvas.width
+		canvas.height = map.canvas.height
+		
 		draw.clear()
 
 		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
@@ -47,37 +52,52 @@ Map.Draw = function(map, opt){
 		ctx.translate( map.center.a,  map.center.b )
 		ctx.scale( -1, 1 )
 
-		draw.regions(Rooms.regions, ["#fff"])
-		draw.mouse(map.ui.mouse.cursor)
-		scene && draw.camera(scene.camera)
-
+		draw.regions(Rooms.regions, ["#fff"], null)
+		
 		ctx.restore()
+		
+		// invert opacity
+		var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+		var pixels = pixelData.data
+		for (var i = 0, k, _len = pixels.length; i < _len; i++) {
+		  k = i*4
+		  if (pixels[k+3] == 0) {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255
+		  }
+		  else {
+		    pixels[k] = pixels[k+1] = pixels[k+2] = 255
+		    pixels[k+3] = 0
+		  }
+		}
+		ctx.putImageData(pixelData, 0, 0)
+
+		// reset the ctx
+		ctx = map.canvas.getContext("2d")
+		
+		return canvas
 	}
 
 	draw.clear = function(){
-		ctx.fillStyle = "rgba(255,255,255,0.98)"
 		ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b)
-		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
 	}
 
-	draw.ruler = function (){
-		ctx.strokeStyle = "rgba(80,80,80,0.5)"
-		ctx.lineWidth = 1
-		var len = 5
-		for (var i = 0.5; i < map.dimensions.a; i += 10) {
-			line(i, 0, i, len)
-			line(0, i, len, i)
-		}
+	draw.fill = function(fillStyle){
+		ctx.fillStyle = fillStyle
+		ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
 	}
 
-	draw.regions = function(regions, colors){
+	draw.regions = function(regions, colors, stroke){
+	  if (stroke) {
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = (1 / map.zoom)
+		}
 		for (var i = 0; i < regions.length; i++) {
 			if (regions[i].dupe) continue
 			ctx.fillStyle = colors[i % colors.length]
-			ctx.strokeStyle = "#000"
-			ctx.lineWidth = (1 / map.zoom)
 			fill_region(regions[i])
-			stroke_sides(regions[i])
+      if (stroke) {
+        stroke_sides(regions[i])
+      }
 		}
 	}