From 0f5e30e813203b63c351db2b7dffcb1766471b56 Mon Sep 17 00:00:00 2001
From: Brian Daley <brian.daley@uconn.edu>
Date: Mon, 4 May 2020 20:47:38 -0400
Subject: [PATCH 1/2] Made the canvas HiDPI

---
 final/css.css      |  8 +++++---
 final/js/canvas.js | 23 +++++++++++++++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/final/css.css b/final/css.css
index d99bed4..3aeafe1 100644
--- a/final/css.css
+++ b/final/css.css
@@ -6,7 +6,8 @@ body{
   min-width:18vw;
   color:white;
   background-color:rgba(0,0,0,.75);
-  margin-left:75vw;
+  top:0px;
+  right: 0px;
   text-align:center;
   z-index:1;
 }
@@ -41,8 +42,9 @@ body{
   bottom:0;
   left:0;
   right:0;
-  min-width:100%;
-  min-height: 100%;
+  width: 100%;
+  /* min-width:100vw; */
+  min-height: 100vh;
   /* z-index:-1; */
 }
 #bianDang{
diff --git a/final/js/canvas.js b/final/js/canvas.js
index 77b5a3c..0328ac7 100644
--- a/final/js/canvas.js
+++ b/final/js/canvas.js
@@ -1,5 +1,24 @@
 var canvas =document.getElementById("canvas");
-var ctx =canvas.getContext("2d");
+var ctx = setupCanvas(canvas);
+
+/** Creates a HiDPI Canvas 
+ * @url https://www.html5rocks.com/en/tutorials/canvas/hidpi/
+*/
+function setupCanvas(canvas) {
+  // Get the device pixel ratio, falling back to 1.
+  var dpr = window.devicePixelRatio || 1;
+  // Get the size of the canvas in CSS pixels.
+  var rect = canvas.getBoundingClientRect();
+  // Give the canvas pixel dimensions of their CSS
+  // size * the device pixel ratio.
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  var ctx = canvas.getContext('2d');
+  // Scale all drawing operations by the dpr, so you
+  // don't have to worry about the difference.
+  ctx.scale(dpr, dpr);
+  return ctx;
+}
 
 //common setting
 // var alpha=1;
@@ -12,7 +31,7 @@ var ctx =canvas.getContext("2d");
 // ctx.shadowBlur=4;
 // ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2);
 
-ctx.font = '35px Kalam';
+ctx.font = '50px Kalam';
 ctx.textAlign='center';
 ctx.shadowOffsetX=3;
 ctx.shadowOffsetY=3;

From 6f65b45d84413f55fab4d6828339d7093c84db18 Mon Sep 17 00:00:00 2001
From: Brian Daley <brian.daley@uconn.edu>
Date: Mon, 4 May 2020 21:12:12 -0400
Subject: [PATCH 2/2] adding images

---
 final/js/canvas.js | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/final/js/canvas.js b/final/js/canvas.js
index 0328ac7..09d5e8f 100644
--- a/final/js/canvas.js
+++ b/final/js/canvas.js
@@ -31,12 +31,7 @@ function setupCanvas(canvas) {
 // ctx.shadowBlur=4;
 // ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2);
 
-ctx.font = '50px Kalam';
-ctx.textAlign='center';
-ctx.shadowOffsetX=3;
-ctx.shadowOffsetY=3;
-ctx.shadowColor='rgba(0,0,0,0.1)';
-ctx.shadowBlur=4;
+
 
 //fadeIn function1
 // function fadeIn(){
@@ -58,6 +53,12 @@ var i=0;
 var a=5;
 
 function fadeIn(){
+    ctx.font = '50px Kalam';
+    ctx.textAlign='center';
+    ctx.shadowOffsetX=3;
+    ctx.shadowOffsetY=3;
+    ctx.shadowColor='rgba(0,0,0,0.1)';
+    ctx.shadowBlur=4;
     ctx.fillStyle=`rgba(255,255,255,${i})`;
     i=i+0.01;
     ctx.fillText('Bian Dang',canvas.width/2,canvas.height/2)
@@ -81,3 +82,33 @@ function openAnimate(){
 bianDang.addEventListener('click',openAnimate)
 
 
+
+
+/**
+ * Add Images
+ */
+window.addEventListener('load', ()=>{
+    // Split canvas into 3 pieces
+    let imgWidth = canvas.width / 3;
+    
+    // First image
+    let img1 = new Image();
+    img1.addEventListener('load', (event) =>{
+        ctx.drawImage(img1, imgWidth * 0, 0, imgWidth, 200);
+    });
+    img1.src = 'https://via.placeholder.com/300.png/0000FF/808080/O%20https://placeholder.com/';
+
+    // Second Image
+    let img2 = new Image();
+    img2.addEventListener('load', (event) =>{
+        ctx.drawImage(img2, imgWidth * 1, 0, imgWidth, 200);
+    });
+    img2.src = 'https://via.placeholder.com/300.png/FF0000/FFFFFF/O%20https://placeholder.com/';
+
+    // Third Image
+    let img3 = new Image();
+    img3.addEventListener('load', (event) =>{
+        ctx.drawImage(img3, imgWidth * 2, 0, imgWidth, 200);
+    });
+    img3.src = 'https://via.placeholder.com/300.png/09f/fff%20C/O%20https://placeholder.com/';
+});