diff --git a/index.html b/index.html
index e788b29..4c1d88d 100644
--- a/index.html
+++ b/index.html
@@ -70,11 +70,16 @@
Reset
-
-
-
This is a real-time fractal zoomer. Using it is simple: left-click to zoom in, right-click to zoom out.
- Touch Devices: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom out with one finger.
- Please use fullscreen mode to experience full functionality
+
+
+ Capture
+
+
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 8ad58a2..c6065a4 100644
--- a/js/starter-template.js
+++ b/js/starter-template.js
@@ -1,24 +1,32 @@
-function fullScreenMessageToggle(){
- if(fullScreenButton.style.visibility == "collapse"){
- fullScreenButton.style.visibility = "visible";
+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)";
- fullScreenToggleButton.value = "X";
+ captureMenuButton.value = "Capture Mode";
}
else{
- fullScreenButton.style.visibility = "collapse";
+ browseButton.style.visibility = "collapse";
resetButton.style.visibility = "collapse";
+ saveCanvasButton.style.visibility = "visible";
+ instructions.style.visibility = "collapse";
containerCanvas.style.filter = "none";
- fullScreenToggleButton.value = "<";
+ captureMenuButton.value = "Go Back";
}
}
-function fullScreenCanvas(){
- canvas.style.visibility = "visible";
+function browseMenu(){
if(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/starter-template.css b/starter-template.css
index 595aa1c..85369cd 100644
--- a/starter-template.css
+++ b/starter-template.css
@@ -5,12 +5,12 @@ body {
padding: 40px 15px;
text-align: center;
}
-#fullScreenButton {
+#browseButton {
position: absolute;
top:1em;
- right:3em
+ right:10em
}
-#fullScreenToggleButton {
+#captureMenuButton {
position: absolute;
top:1em;
right:1em;
@@ -19,4 +19,15 @@ body {
position: absolute;
top:1em;
left:1em;
+}
+#saveCanvasButton {
+ position: absolute;
+ top:1em;
+ left:1em;
+ visibility: collapse;
+}
+#instructions {
+ position: absolute;
+ bottom:1em;
+ left: 1em;
}
\ No newline at end of file