adding default images and fixing export

final project/css/style.css

@@ -212,7 +212,7 @@ ul {
     }
     .main {
         grid-template-columns: 1fr;
-        height: 88vh;
+        height: 93vh;
     }
     .tools {
         height:auto;

final project/index.html

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="https://use.typekit.net/xpy5krv.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
   <meta name="description" content="Collage maker where you can drag images from you files and move, resize, rotate, move to the front, or delete to create a collage.">
 
 </head>
@@ -53,7 +54,10 @@
   </div>
 
   <div class="collage" id="collage">
-    <canvas id="canvas"></canvas>
+    <img src="img/cutecat.jpg" alt="cute cat!">
+    <img src="img/cutecat2.jpg" alt="another cute cat" style="left: 800px">
+    <img src="img/cutecat3.jpg" alt="omg its another cute cat" style="left: 500px; top: 100px;">
+    <img src="img/cutecat4.webp" alt="okay last cute cat hehe" style=" left: 100px; top: 300px;">
   </div>
 
 

final project/js/script.js

@@ -40,7 +40,7 @@ function whileDragging(e) {
         return false;
 
     if (mode == 0) {
-        var newX = e.pageX - 600;
+        var newX = e.pageX - 400;
         var newY = e.pageY - 200;
         currentlyDragging.css({ 'margin-top': newY + 'px', 'margin-left': newX + 'px' });
     } else if (mode == 1) {
@@ -106,25 +106,13 @@ $(document).ready(function () {
     }
 
     function saveCollage() {
-        var canvas = document.createElement('canvas');
-        var collage = $('#collage')[0];
-        var ctx = canvas.getContext('2d');
-
-        // Set canvas size to match collage size
-        canvas.width = collage.offsetWidth;
-        canvas.height = collage.offsetHeight;
-
-        // Draw images from collage onto canvas
-        $(collage).find('img').each(function(index, image) {
-            ctx.drawImage(image, image.offsetLeft, image.offsetTop, image.width, image.height);
+        html2canvas(document.getElementById('collage')).then(function(canvas) {
+            var dataURL = canvas.toDataURL('image/png');
+            var a = document.createElement('a');
+            a.href = dataURL;
+            a.download = 'collage.png';
+            a.click();
         });
-
-        // Generate data URL and initiate download
-        var dataURL = canvas.toDataURL('image/png');
-        var a = document.createElement('a');
-        a.href = dataURL;
-        a.download = 'collage.png';
-        a.click();
     }
 });