Small changes & fixes from VM integration

Changes include:
- Implement pen clear
- Upack pen-related location parameters
- Fix inverted vertical position on pen actions
- Remove canvas debug content
- Set `strokeStyle` instead of `fillStyle`
- Remove location parameter from stamp operation: always stamp in place

src/PenSkin.js

@@ -84,39 +84,51 @@ class PenSkin extends Skin {
     }
 
     /**
-     * Draw a point on the pen layer.
+     * Clear the pen layer.
-     * @param {[number, number]} location - where the point should be drawn.
-     * @param {PenAttributes} penAttributes - how the point should be drawn.
      */
-    drawPoint (location, penAttributes) {
+    clear () {
-        // Canvas renders a zero-length line as two end-caps back-to-back, which is what we want.
+        const ctx = this._canvas.getContext('2d');
-        this.drawLine(location, location, penAttributes);
+        ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
     }
 
     /**
      * Draw a point on the pen layer.
-     * @param {[number, number]} location0 - where the line should start.
+     * @param {PenAttributes} penAttributes - how the point should be drawn.
-     * @param {[number, number]} location1 - where the line should end.
+     * @param {number} x - the X coordinate of the point to draw.
-     * @param {PenAttributes} penAttributes - how the line should be drawn.
+     * @param {number} y - the Y coordinate of the point to draw.
      */
-    drawLine (location0, location1, penAttributes) {
+    drawPoint (penAttributes, x, y) {
+        // Canvas renders a zero-length line as two end-caps back-to-back, which is what we want.
+        this.drawLine(penAttributes, x, y, x, y);
+    }
+
+    /**
+     * Draw a point on the pen layer.
+     * @param {PenAttributes} penAttributes - how the line should be drawn.
+     * @param {number} x0 - the X coordinate of the beginning of the line.
+     * @param {number} y0 - the Y coordinate of the beginning of the line.
+     * @param {number} x1 - the X coordinate of the end of the line.
+     * @param {number} y1 - the Y coordinate of the end of the line.
+     */
+    drawLine (penAttributes, x0, y0, x1, y1) {
         const ctx = this._canvas.getContext('2d');
         this._setAttributes(ctx, penAttributes);
-        ctx.moveTo(location0[0] + this._rotationCenter[0], location0[1] + this._rotationCenter[1]);
         ctx.beginPath();
-        ctx.lineTo(location1[0] + this._rotationCenter[0], location1[1] + this._rotationCenter[1]);
+        ctx.moveTo(this._rotationCenter[0] + x0, this._rotationCenter[1] - y0);
+        ctx.lineTo(this._rotationCenter[0] + x1, this._rotationCenter[1] - y1);
         ctx.stroke();
         this._canvasDirty = true;
     }
 
     /**
      * Stamp an image onto the pen layer.
-     * @param {[number, number]} location - where the stamp should be drawn.
      * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} stampElement - the element to use as the stamp.
+     * @param {number} x - the X coordinate of the stamp to draw.
+     * @param {number} y - the Y coordinate of the stamp to draw.
      */
-    drawStamp (location, stampElement) {
+    drawStamp (stampElement, x, y) {
         const ctx = this._canvas.getContext('2d');
-        ctx.drawImage(stampElement, location[0] + this._rotationCenter[0], location[1] + this._rotationCenter[1]);
+        ctx.drawImage(stampElement, this._rotationCenter[0] + x, this._rotationCenter[1] - y);
         this._canvasDirty = true;
     }
 
@@ -152,27 +164,6 @@ class PenSkin extends Skin {
             }
         );
         this._canvasDirty = true;
-
-        const ctx = this._canvas.getContext('2d');
-        ctx.strokeStyle = 'red';
-        ctx.beginPath();
-        ctx.moveTo(-2, 0);
-        ctx.lineTo(width - 2, height);
-        ctx.stroke();
-        ctx.strokeStyle = 'green';
-        ctx.beginPath();
-        ctx.moveTo(0, 0);
-        ctx.lineTo(width + 0, height);
-        ctx.stroke();
-        ctx.strokeStyle = 'blue';
-        ctx.beginPath();
-        ctx.moveTo(2, 0);
-        ctx.lineTo(width + 2, height);
-        ctx.stroke();
-        ctx.strokeStyle = 'purple';
-        ctx.moveTo(2, height / 10);
-        ctx.lineTo(width / 10, height / 5);
-        ctx.stroke();
     }
 
     _setAttributes (context, penAttributes) {
@@ -185,7 +176,7 @@ class PenSkin extends Skin {
         const b = Math.round(color4f[2] * 255);
         const a = Math.round(color4f[3] * 255);
 
-        context.fillStyle = `rgba(${r},${g},${b},${a})`;
+        context.strokeStyle = `rgba(${r},${g},${b},${a})`;
         context.lineCap = 'round';
         context.lineWidth = diameter;
     }

src/RenderWebGL.js

@@ -732,36 +732,52 @@ class RenderWebGL extends EventEmitter {
         drawable.updateProperties(properties);
     }
 
+    /**
+     * Clear a pen layer.
+     * @param {int} penSkinID - the unique ID of a Pen Skin.
+     */
+    penClear (penSkinID) {
+        const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
+        skin.clear();
+    }
+
     /**
      * Draw a point on a pen layer.
      * @param {int} penSkinID - the unique ID of a Pen Skin.
-     * @param {[number, number]} location - where the point should be drawn.
      * @param {PenAttributes} penAttributes - how the point should be drawn.
+     * @param {number} x - the X coordinate of the point to draw.
+     * @param {number} y - the Y coordinate of the point to draw.
      */
-    penPoint (penSkinID, location, penAttributes) {
+    penPoint (penSkinID, penAttributes, x, y) {
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
-        skin.drawPoint(location, penAttributes);
+        skin.drawPoint(penAttributes, x, y);
     }
 
     /**
      * Draw a line on a pen layer.
      * @param {int} penSkinID - the unique ID of a Pen Skin.
-     * @param {[number, number]} location0 - where the line should start.
-     * @param {[number, number]} location1 - where the line should end.
      * @param {PenAttributes} penAttributes - how the line should be drawn.
+     * @param {number} x0 - the X coordinate of the beginning of the line.
+     * @param {number} y0 - the Y coordinate of the beginning of the line.
+     * @param {number} x1 - the X coordinate of the end of the line.
+     * @param {number} y1 - the Y coordinate of the end of the line.
      */
-    penLine (penSkinID, location0, location1, penAttributes) {
+    penLine (penSkinID, penAttributes, x0, y0, x1, y1) {
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
-        skin.drawLine(location0, location1, penAttributes);
+        skin.drawLine(penAttributes, x0, y0, x1, y1);
     }
 
     /**
-     * Draw a point on a pen layer.
+     * Stamp a Drawable onto a pen layer.
      * @param {int} penSkinID - the unique ID of a Pen Skin.
-     * @param {[number, number]} location - where the point should be drawn.
      * @param {int} stampID - the unique ID of the Drawable to use as the stamp.
      */
-    penStamp (penSkinID, location, stampID) {
+    penStamp (penSkinID, stampID) {
+        const stampDrawable = this._allDrawables[stampID];
+        if (!stampDrawable) {
+            return;
+        }
+
         const bounds = this._touchingBounds(stampID);
         if (!bounds) {
             return;
@@ -798,7 +814,7 @@ class RenderWebGL extends EventEmitter {
         stampImageData.data.set(stampPixels);
         stampContext.putImageData(stampImageData, 0, 0);
 
-        skin.drawStamp(location, stampCanvas);
+        skin.drawStamp(stampCanvas, bounds.left, bounds.top);
     }
 
     /* ******