Draw images on separate layer as <img> elements

client/default.css

@@ -26,14 +26,18 @@ html, body {
     cursor: move;
 }
 
-#canvas0 {
+#canvas-images {
     z-index: 0;
+} 
+
+#canvas0 {
+    z-index: 1;
     box-sizing: border-box;
     border: 1px solid black;
 }
 
 #canvas1 {
-    z-index: 1;
+    z-index: 2;
     pointer-events: none;
     opacity: 0.3;
 }
@@ -82,4 +86,9 @@ html, body {
 
 .toolbar #brush-color::-moz-color-swatch {
     border: none;
+}
+
+.floating-image {
+    position: absolute;
+    pointer-events: none;
 }

client/index.html

@@ -22,5 +22,6 @@
     
     <canvas class="canvas white" id="canvas0"></canvas>
     <canvas class="canvas" id="canvas1"></canvas>
+    <div class="canvas" id="canvas-images"></div>
 </body>
 </html>

client/index.js

@@ -107,6 +107,7 @@ function event_size(event) {
 function move_canvas() {
     elements.canvas0.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`;
     elements.canvas1.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`;
+    elements.images.style.transform = `translate(${-storage.canvas.offset_x}px, ${-storage.canvas.offset_y}px) scale(${storage.canvas.zoom})`;    
 }
 
 function predraw_event(x, y) {
@@ -153,6 +154,7 @@ function main() {
 
     elements.canvas0 = document.getElementById('canvas0');
     elements.canvas1 = document.getElementById('canvas1');
+    elements.images = document.getElementById('canvas-images');
     elements.brush_color = document.getElementById('brush-color');
     elements.brush_width = document.getElementById('brush-width');
     elements.brush_preview = document.getElementById('brush-preview');
@@ -170,6 +172,7 @@ function main() {
 
     storage.ctx0 = elements.canvas0.getContext('2d');
     storage.ctx1 = elements.canvas1.getContext('2d');
+
     storage.ctx1.canvas.width = storage.ctx0.canvas.width = storage.canvas.width;
     storage.ctx1.canvas.height = storage.ctx0.canvas.height = storage.canvas.height;
 

client/recv.js

@@ -127,13 +127,13 @@ async function handle_event(event) {
                 const other_event = storage.events[i];
                 if (other_event.type === EVENT.STROKE && other_event.user_id === event.user_id && !other_event.deleted) {
                     other_event.deleted = true;
-                    const stats = stroke_stats(other_event.points, storage.cursor.width);
+                    // const stats = stroke_stats(other_event.points, storage.cursor.width);
-                    redraw_region(stats.bbox);
+                    // redraw_region(stats.bbox);
                     break;
                 } else if (other_event.type === EVENT.IMAGE && other_event.user_id === event.user_id && !other_event.deleted) {
-                    other_event.deleted = true;
+                    // other_event.deleted = true;
-                    const bbox = bitmap_bbox(other_event);
+                    // const bbox = bitmap_bbox(other_event);
-                    redraw_region(bbox);
+                    // redraw_region(bbox);
                     break;
                 }
             }
@@ -142,14 +142,19 @@ async function handle_event(event) {
         }
 
         case EVENT.IMAGE: {
-            const r = await fetch(config.image_url + event.image_id);
+            const url = config.image_url + event.image_id;
-            const blob = await r.blob();
+            const item = document.createElement('img');
-            const bitmap = await createImageBitmap(blob);
+            item.classList.add('floating-image');
-            
+            item.style.left = `${event.x}px`;
-            event.bitmap = bitmap;
+            item.style.top = `${event.y}px`;
-
+            item.setAttribute('src', url);
-            const bbox = bitmap_bbox(event);
+            elements.images.appendChild(item);
-            storage.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin);
+            // const r = await fetch(config.image_url + event.image_id);
+            // const blob = await r.blob();
+            // const bitmap = await createImageBitmap(blob);
+            // event.bitmap = bitmap;
+            // const bbox = bitmap_bbox(event);
+            // storage.ctx0.drawImage(bitmap, bbox.xmin, bbox.ymin);
 
             break;
         }