-
Instructions
-
Click on "Browse Mode" to perform zoom
-
Click on "Capture Mode" to export canvas as image
-
Mouse Users: Left-click to zoom in, right-click to zoom out
-
Touch Device Users: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom with one finger.
-
+
+
+
+ Instructions
+ Click on "Browse Mode" to perform zoom
+ Click on "Capture Mode" to export canvas as image
+ Mouse Users: Left-click to zoom in, right-click to zoom out
+ Touch Device Users: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom with one finger.
+
diff --git a/js/starter-template.js b/js/starter-template.js
index c6065a4..1e13fb6 100644
--- a/js/starter-template.js
+++ b/js/starter-template.js
@@ -1,32 +1,12 @@
-function captureMenu(){
- if(browseButton.style.visibility == "collapse"){
- browseButton.style.visibility = "visible";
- resetButton.style.visibility = "visible";
- saveCanvasButton.style.visibility = "collapse";
- instructions.style.visibility = "visible";
- containerCanvas.style.filter = "blur(5px)";
- captureMenuButton.value = "Capture Mode";
- }
- else{
- browseButton.style.visibility = "collapse";
- resetButton.style.visibility = "collapse";
- saveCanvasButton.style.visibility = "visible";
- instructions.style.visibility = "collapse";
- containerCanvas.style.filter = "none";
- captureMenuButton.value = "Go Back";
- }
-}
-
-function browseMenu(){
+function saveCanvas(){
+ saveCanvasButton.download = "image.png";
+ saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
+ }
+ function goFullScreen() {
if(canvas.requestFullScreen)
- canvas.requestFullScreen();
+ canvas.requestFullScreen();
else if(canvas.webkitRequestFullScreen)
canvas.webkitRequestFullScreen();
else if(canvas.mozRequestFullScreen)
canvas.mozRequestFullScreen();
-}
-
-function saveCanvas(){
- saveCanvasButton.download = "image.png";
- saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
-}
\ No newline at end of file
+ }
diff --git a/js/xaos.js b/js/xaos.js
index 7053a62..78a1403 100644
--- a/js/xaos.js
+++ b/js/xaos.js
@@ -82,12 +82,13 @@ xaos.zoom = (function() {
* @constructor
*/
function CanvasImage(canvas) {
-
- if (canvas.width !== innerWidth || canvas.height !== innerHeight) {
- canvas.width = innerWidth;
- canvas.height = innerHeight;
+ let width = canvas.clientWidth;
+ let height = canvas.clientHeight;
+ if (canvas.width !== width || canvas.height !== height) {
+ canvas.width = width;
+ canvas.height = height;
} else {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, width, height);
}
this.canvas = canvas;
@@ -1268,7 +1269,6 @@ xaos.zoom = (function() {
};
canvas.ontouchend = function(e) {
- console.log(e);
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
};
diff --git a/starter-template.css b/starter-template.css
index 85369cd..3abed77 100644
--- a/starter-template.css
+++ b/starter-template.css
@@ -1,33 +1,48 @@
body {
padding-top: 75px;
+ padding-bottom: 20px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
-#browseButton {
+#controls {
+ position: relative;
+ margin-bottom: 2.5em;
+ }
+
+ #canvas {
+ width: 100%;
+ height: 100vh;
+ margin-bottom: 0.5em;
+ }
+
+ #fullScreenButton {
position: absolute;
- top:1em;
- right:10em
-}
-#captureMenuButton {
- position: absolute;
- top:1em;
- right:1em;
-}
-#resetButton {
+ height: 100vh;
+ width: 100%;
+ bottom: 3rem;
+ visibility: hidden;
+ }
+
+ @media only screen and (max-width: 600px) {
+ #fullScreenButton {
+ visibility: visible;
+ opacity: 0;
+ }
+ #saveCanvasButton {
+ visibility: hidden;
+ }
+ }
+
+ #resetButton {
position: absolute;
- top:1em;
- left:1em;
-}
-#saveCanvasButton {
- position: absolute;
- top:1em;
- left:1em;
- visibility: collapse;
-}
-#instructions {
+ left: 0em;
+ }
+
+ #saveCanvasButton {
position: absolute;
- bottom:1em;
- left: 1em;
-}
\ No newline at end of file
+ right: 0.1em;
+ color: white;
+ visibility: visible;
+ }
\ No newline at end of file