From 43db987a7ef8ea31bbede0fb56919a777ae0e417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 28 Sep 2018 16:59:38 -0500
Subject: [PATCH] Closes #132

---
 app/components/client/tour-scripts.js | 36 +++++++++++++++------------
 app/sass/pages/_tour.scss             |  1 +
 app/sockets.js                        |  2 +-
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/components/client/tour-scripts.js b/app/components/client/tour-scripts.js
index 9b48ba7..02b0b32 100644
--- a/app/components/client/tour-scripts.js
+++ b/app/components/client/tour-scripts.js
@@ -337,8 +337,8 @@ const handleExamples = debounce(event => {
 
 function initCanvas() { // eslint-disable-line
   const canvas = document.getElementById("meme-canvas");
-  const canvasHeight = 300;
-  const canvasWidth = 400;
+  const canvasHeight = 600;
+  const canvasWidth = 800;
   const ctx = canvas.getContext("2d");
   const img = document.getElementById("base-image");
 
@@ -346,37 +346,41 @@ function initCanvas() { // eslint-disable-line
 
   ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
   ctx.fillStyle = "white";
-  ctx.font = "bold 28px Karla";
+  ctx.font = "bold 56px Karla";
   ctx.lineJoin = "round";
   ctx.lineWidth = 4;
   ctx.strokeStyle = "black";
   ctx.textAlign = "center";
   ctx.textBaseline = "top";
 
-  ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
-  ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
+  positionCanvasText(ctx, canvasHeight, canvasWidth);
+}
 
-  ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
-  ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
+function positionCanvasText(canvas, height, width) {
+  canvas.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
+  canvas.fillText(document.getElementById("meme-top-line").value.toUpperCase(), width / 2, 40);
+
+  canvas.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
+  canvas.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), width / 2, (height - 80));
 }
 
 function updateCanvas(imageSource) {
   const canvas = document.getElementById("meme-canvas");
-  const canvasHeight = 300;
-  const canvasWidth = 400;
+  const canvasHeight = 600;
+  const canvasWidth = 800;
   const ctx = canvas.getContext("2d");
   const img = document.getElementById("base-image");
 
   clearCanvas(canvas);
 
   if (imageSource) {
-    ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
+    ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
+    // ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
     img.src = imageSource.src;
-  } ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
+  } else {
+    ctx.drawImage(imageSource, 0, 0, canvasWidth, 600 * imageSource.height / imageSource.width);
+    // ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
+  }
 
-  ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
-  ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20);
-
-  ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
-  ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
+  positionCanvasText(ctx, canvasHeight, canvasWidth);
 }
diff --git a/app/sass/pages/_tour.scss b/app/sass/pages/_tour.scss
index 62e80bc..98ec01a 100644
--- a/app/sass/pages/_tour.scss
+++ b/app/sass/pages/_tour.scss
@@ -193,6 +193,7 @@
 
   canvas {
     width: 100%; height: 100%;
+    // width: 400px; height: 300px;
 
     background-color: rgba($teal, 0.3);
     margin-bottom: 1rem;
diff --git a/app/sockets.js b/app/sockets.js
index 9390044..60e1ec9 100644
--- a/app/sockets.js
+++ b/app/sockets.js
@@ -220,7 +220,7 @@ function generateMemeCreator(socket) {
   const memeCreator = html`
     <div class="tour__content__meme__canvas">
       <img alt="Base image for LBRY meme creator" id="base-image" style="height: 0; position: absolute; visibility: hidden;"/>
-      <canvas id="meme-canvas" height="300" width="400">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
+      <canvas id="meme-canvas" height="600" width="800">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
 
       ${renderedImages}
     </div>