added a button to easily copy the result to the clipboard as an image

public/css/style.scss

@@ -778,7 +778,7 @@ key {
   }
 }
 
-#restartTestButton, #showWordHistoryButton {
+#restartTestButton, #showWordHistoryButton, #copyResultToClipboardButton {
   position: relative;
   opacity: 0;
   border-radius: var(--roundness);

public/index.html

@@ -205,8 +205,9 @@
         <div id="words" class=""></div>
         <div id="liveWpm">123</div>
         <div class="buttons">
+          <div id="showWordHistoryButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="fas fa-align-left"></i></div>
           <div id="restartTestButton" class="" tabindex="0" onclick="this.blur();"><i class="fas fa-redo-alt"></i></div>
-          <div id="showWordHistoryButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="fas fa-bars"></i></div>
+          <div id="copyResultToClipboardButton" class="hidden" tabindex="0" onclick="this.blur();"><i class="far fa-image"></i></div>
         </div>
       </div>
       <div class="page pageAbout hidden">
@@ -615,6 +616,7 @@
 <script src="js/chart.js"></script>
 <script src="js/chartjs-plugin-trendline.js"></script>
 <script src="js/chartjs-plugin-annotation.js"></script>
+<script src="js/html2canvas.js"></script>
 <script src="js/words.js?v=3"></script>
 <script src="js/layouts.js?v=3"></script>
 <script src="js/db.js?v=3"></script>

public/js/script.js

@@ -45,15 +45,35 @@ function showNotification(text, time) {
   });
 }
 
-function test() {
-  $("#resultScreenshot").removeClass("hidden");
-  html2canvas($("#resultScreenshot"), {
-    onclone: function(clonedDoc) {
-      clonedDoc.getElementById("resultScreenshot").style.display = "block";
-    }
-  }).then((canvas) => {
-    $("#resultScreenshot").removeClass("hidden");
-    document.body.appendChild(canvas);
+function copyResultToClipboard() {
+  let src = $('#middle');
+  var sourceX = src.position().left;/*X position from div#target*/
+  var sourceY = src.position().top;/*Y position from div#target*/
+  var sourceWidth = src.width();/*clientWidth/offsetWidth from div#target*/
+  var sourceHeight = src.height();/*clientHeight/offsetHeight from div#target*/
+
+  let bgColor = getComputedStyle(document.body).getPropertyValue('--bg-color').replace(' ', '');
+
+  html2canvas(document.body,{
+    backgroundColor: bgColor,
+    height: sourceHeight + 50,
+    width: sourceWidth + 50,
+    x: sourceX - 25,
+    y: sourceY - 25
+  }).then(function(canvas) {
+    // document.body.appendChild(canvas);
+    canvas.toBlob(function(blob) {
+      navigator.clipboard
+        .write([
+          new ClipboardItem(
+            Object.defineProperty({}, blob.type, {
+              value: blob,
+              enumerable: true
+            })
+          )
+        ])
+    });
+    showNotification('Copied to clipboard',1000);
   });
 }
 
@@ -551,6 +571,7 @@ function showResult(difficultyFailed = false) {
 
   setTimeout(function() {
     $("#showWordHistoryButton").removeClass('hidden').css('opacity',1);
+    $("#copyResultToClipboardButton").removeClass('hidden').css('opacity',1);
   }, 125);
   
 
@@ -801,6 +822,11 @@ function restartTest() {
     }, 125, ()=>{
       $("#showWordHistoryButton").addClass('hidden');
     });
+    $("#copyResultToClipboardButton").stop(true,true).animate({
+      opacity: 0
+    }, 125, ()=>{
+      $("#copyResultToClipboardButton").addClass('hidden');
+    });
   }
   resultVisible = false;
 
@@ -1206,6 +1232,10 @@ $(document.body).on("click", "#showWordHistoryButton", (event) => {
   toggleResultWordsDisplay();
 });
 
+$(document.body).on("click", "#copyResultToClipboardButton", (event) => {
+  copyResultToClipboard();
+});
+
 $(document.body).on("click", ".version", (event) => {
   $("#versionHistoryWrapper").css('opacity', 0).removeClass('hidden').animate({ opacity: 1 }, 125);
 });