Skip to content

Instantly share code, notes, and snippets.

@hoorayimhelping

hoorayimhelping/foo.diff

Created September 18, 2015 19:32
Show Gist options
  • Save hoorayimhelping/cb50176953d20cd72c59 to your computer and use it in GitHub Desktop.
Save hoorayimhelping/cb50176953d20cd72c59 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
foo.diff
diff --git a/index.html b/index.html
index ff3ee1c..e289f9f 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,9 @@
<title>Delta-V Maps</title>
</head>
<body>
- <canvas id="canvas"></canvas>
+ <div class="container" id="container">
+ <canvas id="canvas"></canvas>
+ </div>
<script type="text/javascript" src="js/app.js"></script>
</body>
diff --git a/js/app.js b/js/app.js
index 3eeecc9..1891ce9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,12 +1,19 @@
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-var Renderer = function(context) {
- this.context = context;
+var Renderer = function(canvas) {
+ this.$canvas = canvas;
+ this.$canvas.width = 1200;
+ this.$canvas.height = 1200;
+ this.$canvas.style.width = "100%";
+ this.$canvas.style.height = "100%";
};
Renderer.prototype = {
init: function(pixel_ratio) {
+ this.context = this.$canvas.getContext('2d');
+ this.context.scale(2, 2);
+
this.defaults();
- // this.context.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
+ this.context.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
},
render: function() {
@@ -51,6 +58,21 @@ Renderer.prototype = {
this.context.stroke();
this.context.closePath();
+ },
+
+ scaleCanvas: function($container) {
+ var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
+
+ var pixel_ratio = 2;
+
+ this.$canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
+ this.$canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
+
+ this.$canvas.style.width = $container.offsetWidth;
+ this.$canvas.style.height = $container.offsetHeight;
+
+ // changing the canvas width or height re-initializes the canvas' state, including transforms and fill colors
+ this.init(pixel_ratio);
}
};
@@ -60,20 +82,18 @@ module.exports = Renderer;
var react = require('react');
var CanvasRenderer = require('../rendering/canvas');
-console.log('sup');
-
-var canvas = document.getElementById('canvas');
-canvas.width = 1200;
-canvas.height = 1200;
+var $canvas = document.getElementById('canvas');
+var renderer = new CanvasRenderer($canvas);
+var $container = document.getElementById('container')
-var context = canvas.getContext('2d');
-context.scale(2, 2);
-
-var renderer = new CanvasRenderer(context);
renderer.init();
renderer.context.fillStyle = "#F00";
renderer.context.fillText('Hello!', 300, 300);
+window.addEventListener('resize', function(event) {
+ renderer.scaleCanvas($container);
+ }, false);
+
},{"../rendering/canvas":1,"react":157}],3:[function(require,module,exports){
/**
* Copyright 2013-2015, Facebook, Inc.
diff --git a/js/rendering/canvas.js b/js/rendering/canvas.js
index 82baa07..5d962df 100644
--- a/js/rendering/canvas.js
+++ b/js/rendering/canvas.js
@@ -1,11 +1,18 @@
-var Renderer = function(context) {
- this.context = context;
+var Renderer = function(canvas) {
+ this.$canvas = canvas;
+ this.$canvas.width = 1200;
+ this.$canvas.height = 1200;
+ this.$canvas.style.width = "100%";
+ this.$canvas.style.height = "100%";
};
Renderer.prototype = {
init: function(pixel_ratio) {
+ this.context = this.$canvas.getContext('2d');
+ this.context.scale(2, 2);
+
this.defaults();
- // this.context.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
+ this.context.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
},
render: function() {
@@ -50,6 +57,21 @@ Renderer.prototype = {
this.context.stroke();
this.context.closePath();
+ },
+
+ scaleCanvas: function($container) {
+ var border_width = parseInt(getComputedStyle($container)['border-left-width'], 10) + parseInt(getComputedStyle($container)['border-right-width'], 10);
+
+ var pixel_ratio = 2;
+
+ this.$canvas.width = ($container.offsetWidth - border_width) * pixel_ratio;
+ this.$canvas.height = ($container.offsetHeight - border_width) * pixel_ratio;
+
+ this.$canvas.style.width = $container.offsetWidth;
+ this.$canvas.style.height = $container.offsetHeight;
+
+ // changing the canvas width or height re-initializes the canvas' state, including transforms and fill colors
+ this.init(pixel_ratio);
}
};
diff --git a/js/views/main.js b/js/views/main.js
index 205d1e3..a20091e 100644
--- a/js/views/main.js
+++ b/js/views/main.js
@@ -1,16 +1,14 @@
var react = require('react');
var CanvasRenderer = require('../rendering/canvas');
-console.log('sup');
+var $canvas = document.getElementById('canvas');
+var renderer = new CanvasRenderer($canvas);
+var $container = document.getElementById('container')
-var canvas = document.getElementById('canvas');
-canvas.width = 1200;
-canvas.height = 1200;
-
-var context = canvas.getContext('2d');
-context.scale(2, 2);
-
-var renderer = new CanvasRenderer(context);
renderer.init();
renderer.context.fillStyle = "#F00";
renderer.context.fillText('Hello!', 300, 300);
+
+window.addEventListener('resize', function(event) {
+ renderer.scaleCanvas($container);
+ }, false);
diff --git a/js/views/main.jsx b/js/views/main.jsx
index 205d1e3..a20091e 100644
--- a/js/views/main.jsx
+++ b/js/views/main.jsx
@@ -1,16 +1,14 @@
var react = require('react');
var CanvasRenderer = require('../rendering/canvas');
-console.log('sup');
+var $canvas = document.getElementById('canvas');
+var renderer = new CanvasRenderer($canvas);
+var $container = document.getElementById('container')
-var canvas = document.getElementById('canvas');
-canvas.width = 1200;
-canvas.height = 1200;
-
-var context = canvas.getContext('2d');
-context.scale(2, 2);
-
-var renderer = new CanvasRenderer(context);
renderer.init();
renderer.context.fillStyle = "#F00";
renderer.context.fillText('Hello!', 300, 300);
+
+window.addEventListener('resize', function(event) {
+ renderer.scaleCanvas($container);
+ }, false);
diff --git a/styles/main.css b/styles/main.css
index d6df7a2..9bbe582 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,9 @@
canvas {
border: 1px red solid;
- height: 600px;
- width: 600px;
+}
+
+.container {
+ display: block;
+ margin: 0 auto;
+ width: 100%;
}
\ No newline at end of file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment