diff options
| -rw-r--r-- | src/style.css | 4 | ||||
| -rw-r--r-- | src/view/MapView.coffee | 15 |
2 files changed, 9 insertions, 10 deletions
diff --git a/src/style.css b/src/style.css index a1d58ec..e27a003 100644 --- a/src/style.css +++ b/src/style.css @@ -1,10 +1,8 @@ html, body { width: 100%; height: 100%; -} -canvas { - position: absolute; + background: black; } * { diff --git a/src/view/MapView.coffee b/src/view/MapView.coffee index 4cd05de..8cb7404 100644 --- a/src/view/MapView.coffee +++ b/src/view/MapView.coffee @@ -28,11 +28,12 @@ class MapView @redrawPending = false @canvas = document.createElement 'canvas' - @ctx = @canvas.getContext '2d' + @canvas.style.position = 'absolute' body.appendChild @canvas - body.addEventListener 'resize', @setSize + @ctx = @canvas.getContext '2d' + window.addEventListener 'resize', @setSize @setSize() loadTiles(@map.tiles).then (tiles) => @@ -40,12 +41,12 @@ class MapView @redraw() ready() - drawTile: (x, y, tile) -> + drawTile: (x, y, tile) => return unless tile @ctx.drawImage(tile, x, y) - draw: -> + draw: => @redrawPending = false @ctx.clearRect 0, 0, @canvas.width, @canvas.height @@ -64,12 +65,12 @@ class MapView y += tileSize - redraw: -> + redraw: => unless @redrawPending @redrawPending = true - window.requestAnimationFrame => @draw() + window.requestAnimationFrame @draw - setSize: -> + setSize: => e = document.documentElement @canvas.width = window.innerWidth || e.clientWidth || body.clientWidth @canvas.height = window.innerHeight || e.clientHeight || body.clientHeight |