Take render target size into account when drawing

Author: adroitwhiz

src/RenderWebGL.js

@@ -626,7 +626,10 @@ class RenderWebGL extends EventEmitter {
         gl.clearColor.apply(gl, this._backgroundColor);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection);
+        this._drawThese(this._drawList, ShaderManager.DRAW_MODE.default, this._projection, {
+            framebufferWidth: gl.canvas.width,
+            framebufferHeight: gl.canvas.height
+        });
         if (this._snapshotCallbacks.length > 0) {
             const snapshot = gl.canvas.toDataURL();
             this._snapshotCallbacks.forEach(cb => cb(snapshot));
@@ -1674,13 +1677,20 @@ class RenderWebGL extends EventEmitter {
      * @param {object.<string,*>} opts.extraUniforms Extra uniforms for the shaders.
      * @param {int} opts.effectMask Bitmask for effects to allow
      * @param {boolean} opts.ignoreVisibility Draw all, despite visibility (e.g. stamping, touching color)
+     * @param {int} opts.framebufferWidth The width of the framebuffer being drawn onto. Defaults to "native" width
+     * @param {int} opts.framebufferHeight The height of the framebuffer being drawn onto. Defaults to "native" height
      * @private
      */
     _drawThese (drawables, drawMode, projection, opts = {}) {
 
         const gl = this._gl;
         let currentShader = null;
 
+        const framebufferSpaceScaleDiffers = (
+            opts.framebufferWidth && opts.framebufferHeight &&
+            opts.framebufferWidth !== this._nativeSize[0] && opts.framebufferHeight !== this._nativeSize[1]
+        );
+
         const numDrawables = drawables.length;
         for (let drawableIndex = 0; drawableIndex < numDrawables; ++drawableIndex) {
             const drawableID = drawables[drawableIndex];
@@ -1695,11 +1705,13 @@ class RenderWebGL extends EventEmitter {
             // the ignoreVisibility flag is used (e.g. for stamping or touchingColor).
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
-            // Combine drawable scale with the native vs. backing pixel ratio
-            const drawableScale = [
-                drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
-                drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
-            ];
+            // drawableScale is the "framebuffer-pixel-space" scale of the drawable, as percentages of the drawable's
+            // "native size" (so 100 = same as skin's "native size", 200 = twice "native size").
+            // If the framebuffer dimensions are the same as the stage's "native" size, there's no need to calculate it.
+            const drawableScale = framebufferSpaceScaleDiffers ? [
+                drawable.scale[0] * opts.framebufferWidth / this._nativeSize[0],
+                drawable.scale[1] * opts.framebufferHeight / this._nativeSize[1]
+            ] : drawable.scale;
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;