Draw image

desktop/sources/scripts/library.js

@@ -2,8 +2,9 @@ function Library (ronin) {
   this.clear = (rect = this.select_all()) => {
   }
 
-  this.load = (path, rect) => {
+  this.draw = (path, rect) => {
-    console.log(path, rect)
+    ronin.surface.draw(path, rect)
+    return rect
   }
 
   // Rects
@@ -28,6 +29,10 @@ function Library (ronin) {
     return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 15, h: Math.floor(window.innerHeight) - 30 }
   }
 
+  this.path = (path) => {
+    return path
+  }
+
   // Copy/Paste
 
   this.clone = (a, b) => {

desktop/sources/scripts/surface.js

@@ -79,6 +79,16 @@ function Surface (ronin) {
     this.context.closePath()
   }
 
+  this.draw = function (path, rect = this.getRect()) {
+    const img = new Image()
+    img.src = path
+    img.onload = () => {
+      const ratio = img.width / img.height
+      const scale = rect.w / img.width
+      this.context.drawImage(img, rect.x, rect.y, rect.w, img.height * scale)
+    }
+  }
+
   this.clear = function (rect = this.getRect()) {
     this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }

examples/load.lisp

@@ -0,0 +1,5 @@
+; load file
+
+((clear)
+  (stroke (draw ($path) ($rect)) 1 "red")
+)