Draw stretch with (draw $line)

WORKSHOP.md

@@ -25,14 +25,14 @@ To import an image onto the current canvas, type the following text, drag an ima
 
 ```
 (import $path 
-  (rect 50 100 250 200))
+  (guide $rect))
 ```
 
-The previous code will import an image, and position it at `50,100`, at a size of `250x200`. Alternatively, you could use a `(pos)` to position the image and not resize it.
+The previous code will import an image, and position it at `50,100`, at a size of `250x200`. Alternatively, you could use a `(line)` to stretch the image.
 
 ```
 (import $path 
-  (pos 50 100))
+  (guide $line))
 ```
 
 ### Crop

desktop/sources/scripts/library.js

@@ -1,8 +1,8 @@
 function Library (ronin) {
-  this.import = async (path, rect) => { // Imports a graphic file with format.
+  this.import = async (path, shape) => { // Imports a graphic file with format.
     const img = new Image()
     img.src = path
-    return ronin.surface.draw(img, rect)
+    return ronin.surface.draw(img, shape)
   }
 
   this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.

desktop/sources/scripts/surface.js

@@ -133,11 +133,17 @@ function Surface (ronin) {
     })
   }
 
-  this.draw = function (img, rect = this.getFrame()) {
+  this.draw = function (img, shape = this.getFrame()) {
     return new Promise(resolve => {
       img.onload = () => {
         ronin.log(`Draw ${img.width}x${img.height}`)
-        this.context.drawImage(img, rect.x, rect.y, rect.w, rect.h) // no strect: img.height * (rect.w / img.width)
+        if (isLine(shape)) {
+          this.context.drawImage(img, shape.a.x, shape.a.y, shape.b.x - shape.a.x, shape.b.y - shape.a.y)
+        } else if (isRect(shape)) {
+          this.context.drawImage(img, shape.x, shape.y, shape.w, img.height * (shape.w / img.width))
+        } else {
+          this.context.drawImage(img, shape.x, shape.y, img.width, img.height)
+        }
         resolve()
       }
     })