melonjs 13.0.0 → 13.2.0

package/src/video/canvas/canvas_renderer.js

@@ -5,7 +5,6 @@ import Ellipse from "./../../geometries/ellipse.js";
 import RoundRect from "./../../geometries/roundrect.js";
 import Rect from "./../../geometries/rectangle.js";
 import Bounds from "./../../physics/bounds.js";
-import { createCanvas } from "./../video.js";
 import * as event from "./../../system/event.js";
 
 /**
@@ -19,7 +18,6 @@ class CanvasRenderer extends Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel renderering (performance hit when enabled)
@@ -32,17 +30,7 @@ class CanvasRenderer extends Renderer {
         super(options);
 
         // defined the 2d context
-        this.context = this.getContext2d(this.getScreenCanvas(), this.settings.transparent);
-
-        // create the back buffer if we use double buffering
-        if (this.settings.doubleBuffering) {
-            this.backBufferCanvas = createCanvas(this.settings.width, this.settings.height, true);
-            this.backBufferContext2D = this.getContext2d(this.backBufferCanvas);
-        }
-        else {
-            this.backBufferCanvas = this.getScreenCanvas();
-            this.backBufferContext2D = this.context;
-        }
+        this.context = this.getContext2d(this.getCanvas(), this.settings.transparent);
 
         this.setBlendMode(this.settings.blendMode);
 
@@ -58,13 +46,13 @@ class CanvasRenderer extends Renderer {
         }
 
         // context lost & restore event for canvas
-        this.getScreenCanvas().addEventListener("contextlost", (e) => {
+        this.getCanvas().addEventListener("contextlost", (e) => {
             e.preventDefault();
             this.isContextValid = false;
             event.emit(event.ONCONTEXT_LOST, this);
         }, false );
         // ctx.restoreContext()
-        this.getScreenCanvas().addEventListener("contextrestored", () => {
+        this.getCanvas().addEventListener("contextrestored", () => {
             this.isContextValid = true;
             event.emit(event.ONCONTEXT_RESTORED, this);
         }, false );
@@ -86,7 +74,7 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     resetTransform() {
-        this.backBufferContext2D.setTransform(1, 0, 0, 1, 0, 0);
+        this.getContext().setTransform(1, 0, 0, 1, 0, 0);
     }
 
     /**
@@ -128,12 +116,6 @@ class CanvasRenderer extends Renderer {
                 this.currentBlendMode = "normal";
                 break;
         }
-
-        // transparent setting will override the given blendmode for this.context
-        if (this.settings.doubleBuffering && this.settings.transparent) {
-            // Clears the front buffer for each frame blit
-            this.context.globalCompositeOperation = "copy";
-        }
     }
 
     /**
@@ -142,19 +124,10 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     clear() {
-        if (this.settings.transparent) {
-            this.clearColor("rgba(0,0,0,0)", true);
-        }
-    }
-
-    /**
-     * render the main framebuffer on screen
-     * @name flush
-     * @memberof CanvasRenderer
-     */
-    flush() {
-        if (this.settings.doubleBuffering) {
-            this.context.drawImage(this.backBufferCanvas, 0, 0);
+        if (this.settings.transparent === false) {
+            var canvas = this.getCanvas();
+            var context = this.getContext();
+            context.clearRect(0, 0, canvas.width, canvas.height);
         }
     }
 
@@ -165,12 +138,16 @@ class CanvasRenderer extends Renderer {
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
      */
-    clearColor(color = "#000000", opaque) {
+    clearColor(color = "#000000", opaque = false) {
+        var canvas = this.getCanvas();
+        var context = this.getContext();
+
         this.save();
         this.resetTransform();
-        this.backBufferContext2D.globalCompositeOperation = opaque ? "copy" : "source-over";
-        this.backBufferContext2D.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
-        this.fillRect(0, 0, this.backBufferCanvas.width, this.backBufferCanvas.height);
+        context.globalAlpha = 1;
+        context.globalCompositeOperation = opaque === true ? "copy" : "source-over";
+        context.fillStyle = (color instanceof Color) ? color.toRGBA() : color;
+        this.fillRect(0, 0, canvas.width, canvas.height);
         this.restore();
     }
 
@@ -530,15 +507,28 @@ class CanvasRenderer extends Renderer {
         this.strokeRoundRect(x, y, width, height, radius, true);
     }
 
+    /**
+     * Stroke a Point at the specified coordinates
+     * @name strokePoint
+     * @memberof CanvasRenderer
+     * @param {number} x
+     * @param {number} y
+     */
+    strokePoint(x, y) {
+        this.strokeLine(x, y, x + 1, y + 1);
+    }
 
     /**
-     * return a reference to the system 2d Context
-     * @name getContext
+     * Draw a a point at the specified coordinates
+     * @name fillPoint
      * @memberof CanvasRenderer
-     * @returns {CanvasRenderingContext2D}
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
      */
-    getContext() {
-        return this.backBufferContext2D;
+    fillPoint(x, y) {
+        this.strokePoint(x, y);
     }
 
     /**
@@ -556,7 +546,7 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     save() {
-        this.backBufferContext2D.save();
+        this.getContext().save();
     }
 
     /**
@@ -565,12 +555,12 @@ class CanvasRenderer extends Renderer {
      * @memberof CanvasRenderer
      */
     restore() {
-        this.backBufferContext2D.restore();
+        this.getContext().restore();
         this.currentColor.glArray[3] = this.getGlobalAlpha();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
-        this.currentScissor[2] = this.backBufferCanvas.width;
-        this.currentScissor[3] = this.backBufferCanvas.height;
+        this.currentScissor[2] = this.getCanvas().width;
+        this.currentScissor[3] = this.getCanvas().height;
     }
 
     /**
@@ -580,7 +570,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} angle in radians
      */
     rotate(angle) {
-        this.backBufferContext2D.rotate(angle);
+        this.getContext().rotate(angle);
     }
 
     /**
@@ -591,7 +581,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} y
      */
     scale(x, y) {
-        this.backBufferContext2D.scale(x, y);
+        this.getContext().scale(x, y);
     }
 
     /**
@@ -602,8 +592,9 @@ class CanvasRenderer extends Renderer {
      * @param {Color|string} color css color value
      */
     setColor(color) {
-        this.backBufferContext2D.strokeStyle =
-        this.backBufferContext2D.fillStyle = (
+        var context = this.getContext();
+        context.strokeStyle =
+        context.fillStyle = (
             color instanceof Color ?
             color.toRGBA() :
             color
@@ -617,7 +608,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha) {
-        this.backBufferContext2D.globalAlpha = this.currentColor.glArray[3] = alpha;
+        this.getContext().globalAlpha = this.currentColor.glArray[3] = alpha;
     }
 
     /**
@@ -627,7 +618,7 @@ class CanvasRenderer extends Renderer {
      * @returns {number} global alpha value
      */
     getGlobalAlpha() {
-        return this.backBufferContext2D.globalAlpha;
+        return this.getContext().globalAlpha;
     }
 
     /**
@@ -637,7 +628,7 @@ class CanvasRenderer extends Renderer {
      * @param {number} width Line width
      */
     setLineWidth(width) {
-        this.backBufferContext2D.lineWidth = width;
+        this.getContext().lineWidth = width;
     }
 
     /**
@@ -672,7 +663,7 @@ class CanvasRenderer extends Renderer {
             f |= 0;
         }
 
-        this.backBufferContext2D.transform(a, b, c, d, e, f);
+        this.getContext().transform(a, b, c, d, e, f);
     }
 
     /**
@@ -684,9 +675,9 @@ class CanvasRenderer extends Renderer {
      */
     translate(x, y) {
         if (this.settings.subPixel === false) {
-            this.backBufferContext2D.translate(~~x, ~~y);
+            this.getContext().translate(~~x, ~~y);
         } else {
-            this.backBufferContext2D.translate(x, y);
+            this.getContext().translate(x, y);
         }
     }
 
@@ -704,14 +695,14 @@ class CanvasRenderer extends Renderer {
      * @param {number} height
      */
     clipRect(x, y, width, height) {
-        var canvas = this.backBufferCanvas;
+        var canvas = this.getCanvas();
         // if requested box is different from the current canvas size;
         if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {
             var currentScissor = this.currentScissor;
             // if different from the current scissor box
             if (currentScissor[0] !== x || currentScissor[1] !== y ||
                 currentScissor[2] !== width || currentScissor[3] !== height) {
-                var context = this.backBufferContext2D;
+                var context = this.getContext();
                 context.beginPath();
                 context.rect(x, y, width, height);
                 context.clip();

package/src/video/renderer.js

@@ -11,6 +11,7 @@ import Polygon from "./../geometries/poly.js";
 import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
 import Path2D from "./../geometries/path2d.js";
+import Point from "../geometries/point.js";
 
 /**
  * @classdesc
@@ -22,10 +23,10 @@ class Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering (not applicable when using the WebGL Renderer)
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
-     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
+     * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas
+     * @param {boolean} [options.premultipliedAlpha=true] in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
      * @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
      * @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
@@ -36,26 +37,20 @@ class Renderer {
         /**
          * The given constructor options
          * @public
-         * @name settings
-         * @memberof Renderer#
          * @type {object}
          */
         this.settings = options;
 
         /**
          * true if the current rendering context is valid
-         * @name isContextValid
-         * @memberof Renderer#
          * @default true
-         * type {boolean}
+         * @type {boolean}
          */
         this.isContextValid = true;
 
         /**
          * The Path2D instance used by the renderer to draw primitives
-         * @name path2D
          * @type {Path2D}
-         * @memberof Renderer#
          */
         this.path2D = new Path2D();
 
@@ -84,13 +79,9 @@ class Renderer {
         } else if (typeof this.settings.canvas !== "undefined") {
             this.canvas = this.settings.canvas;
         } else {
-            this.canvas = createCanvas(this.settings.zoomX, this.settings.zoomY);
+            this.canvas = createCanvas(this.settings.width, this.settings.height);
         }
 
-        // canvas object and context
-        this.backBufferCanvas = this.canvas;
-        this.context = null;
-
         // global color
         this.currentColor = new Color(0, 0, 0, 1.0);
 
@@ -111,15 +102,16 @@ class Renderer {
 
     /**
      * prepare the framebuffer for drawing a new frame
-     * @name clear
-     * @memberof Renderer
      */
     clear() {}
 
+    /**
+     * render the main framebuffer on screen
+     */
+    flush() {}
+
     /**
      * Reset context state
-     * @name reset
-     * @memberof Renderer
      */
     reset() {
         this.resetTransform();
@@ -129,46 +121,30 @@ class Renderer {
         this.cache.clear();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
-        this.currentScissor[2] = this.backBufferCanvas.width;
-        this.currentScissor[3] = this.backBufferCanvas.height;
+        this.currentScissor[2] = this.getCanvas().width;
+        this.currentScissor[3] = this.getCanvas().height;
         this.clearMask();
     }
 
     /**
-     * return a reference to the system canvas
-     * @name getCanvas
-     * @memberof Renderer
+     * return a reference to the canvas which this renderer draws to
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
-        return this.backBufferCanvas;
-    }
-
-    /**
-     * return a reference to the screen canvas
-     * @name getScreenCanvas
-     * @memberof Renderer
-     * @returns {HTMLCanvasElement}
-     */
-    getScreenCanvas() {
         return this.canvas;
     }
 
+
     /**
-     * return a reference to the screen canvas corresponding 2d Context<br>
-     * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
-     * @name getScreenContext
-     * @memberof Renderer
-     * @returns {CanvasRenderingContext2D}
+     * return a reference to this renderer canvas corresponding Context
+     * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
-    getScreenContext() {
+    getContext() {
         return this.context;
     }
 
     /**
      * returns the current blend mode for this renderer
-     * @name getBlendMode
-     * @memberof Renderer
      * @returns {string} blend mode
      */
     getBlendMode() {
@@ -178,8 +154,6 @@ class Renderer {
     /**
      * Returns the 2D Context object of the given Canvas<br>
      * Also configures anti-aliasing and blend modes based on constructor options.
-     * @name getContext2d
-     * @memberof Renderer
      * @param {HTMLCanvasElement} canvas
      * @param {boolean} [transparent=true] use false to disable transparency
      * @returns {CanvasRenderingContext2D}
@@ -215,28 +189,22 @@ class Renderer {
 
     /**
      * return the width of the system Canvas
-     * @name getWidth
-     * @memberof Renderer
      * @returns {number}
      */
     getWidth() {
-        return this.backBufferCanvas.width;
+        return this.getCanvas().width;
     }
 
     /**
      * return the height of the system Canvas
-     * @name getHeight
-     * @memberof Renderer
      * @returns {number} height of the system Canvas
      */
     getHeight() {
-        return this.backBufferCanvas.height;
+        return this.getCanvas().height;
     }
 
     /**
      * get the current fill & stroke style color.
-     * @name getColor
-     * @memberof Renderer
      * @returns {Color} current global color
      */
     getColor() {
@@ -245,8 +213,6 @@ class Renderer {
 
     /**
      * return the current global alpha
-     * @name globalAlpha
-     * @memberof Renderer
      * @returns {number}
      */
     globalAlpha() {
@@ -255,8 +221,6 @@ class Renderer {
 
     /**
      * check if the given rect or bounds overlaps with the renderer screen coordinates
-     * @name overlaps
-     * @memberof Renderer
      * @param {Rect|Bounds} bounds
      * @returns {boolean} true if overlaps
      */
@@ -270,15 +234,14 @@ class Renderer {
 
     /**
      * resizes the system canvas
-     * @name resize
-     * @memberof Renderer
      * @param {number} width new width of the canvas
      * @param {number} height new height of the canvas
      */
     resize(width, height) {
-        if (width !== this.backBufferCanvas.width || height !== this.backBufferCanvas.height) {
-            this.canvas.width = this.backBufferCanvas.width = width;
-            this.canvas.height = this.backBufferCanvas.height = height;
+        var canvas = this.getCanvas();
+        if (width !== canvas.width || height !== canvas.height) {
+            canvas.width = width;
+            canvas.height = height;
             this.currentScissor[0] = 0;
             this.currentScissor[1] = 0;
             this.currentScissor[2] = width;
@@ -290,8 +253,6 @@ class Renderer {
 
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
-     * @name setAntiAlias
-     * @memberof Renderer
      * @param {CanvasRenderingContext2D} context
      * @param {boolean} [enable=false]
      */
@@ -319,8 +280,6 @@ class Renderer {
 
     /**
      * set/change the current projection matrix (WebGL only)
-     * @name setProjection
-     * @memberof Renderer
      * @param {Matrix3d} matrix
      */
     setProjection(matrix) {
@@ -329,8 +288,6 @@ class Renderer {
 
     /**
      * stroke the given shape
-     * @name stroke
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} shape a shape object to stroke
      * @param {boolean} [fill=false] fill the shape with the current color if true
      */
@@ -357,6 +314,10 @@ class Renderer {
             );
             return;
         }
+        if (shape instanceof Point) {
+            this.strokePoint(shape.x, shape.y);
+            return;
+        }
         throw new Error("Invalid geometry for fill/stroke");
     }
 
@@ -372,8 +333,6 @@ class Renderer {
 
     /**
      * tint the given image or canvas using the given color
-     * @name tint
-     * @memberof Renderer
      * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
      * @param {Color|string} color the color that will be used to tint the image
      * @param {string} [mode="multiply"] the composition mode used to tint the image
@@ -402,8 +361,6 @@ class Renderer {
      * A mask limits rendering elements to the shape and position of the given mask object.
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
-     * @name setMask
-     * @memberof Renderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] the shape defining the mask to be applied
      * @param {boolean} [invert=false] either the given shape should define what is visible (default) or the opposite
      */
@@ -412,16 +369,12 @@ class Renderer {
 
     /**
      * disable (remove) the rendering mask set through setMask.
-     * @name clearMask
      * @see Renderer#setMask
-     * @memberof Renderer
      */
     clearMask() {}
 
     /**
      * set a coloring tint for sprite based renderables
-     * @name setTint
-     * @memberof Renderer
      * @param {Color} tint the tint color
      * @param {number} [alpha] an alpha value to be applied to the tint
      */
@@ -433,9 +386,7 @@ class Renderer {
 
     /**
      * clear the rendering tint set through setTint.
-     * @name clearTint
      * @see Renderer#setTint
-     * @memberof Renderer
      */
     clearTint() {
         // reset to default

package/src/video/texture/canvas_texture.js

@@ -5,7 +5,8 @@ import { setPrefixed } from "./../../utils/agent.js";
 var defaultAttributes = {
     offscreenCanvas : false,
     willReadFrequently : false,
-    antiAlias : false
+    antiAlias : false,
+    context: "2d"
 };
 
 /**
@@ -15,7 +16,8 @@ class CanvasTexture {
     /**
      * @param {number} width the desired width of the canvas
      * @param {number} height the desired height of the canvas
-     * @param {object} attributes The attributes to create both the canvas and 2d context
+     * @param {object} attributes The attributes to create both the canvas and context
+     * @param {boolean} [attributes.context="2d"] the context type to be created ("2d", "webgl", "webgl2")
      * @param {boolean} [attributes.offscreenCanvas=false] will create an offscreenCanvas if true instead of a standard canvas
      * @param {boolean} [attributes.willReadFrequently=false] Indicates whether or not a lot of read-back operations are planned
      * @param {boolean} [attributes.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.

package/src/video/video.js

@@ -20,11 +20,11 @@ var designHeight = 0;
 var settings = {
     parent : undefined,
     renderer : 2, // AUTO
-    doubleBuffering : false,
     autoScale : false,
     scale : 1.0,
-    scaleMethod : "fit",
+    scaleMethod : "manual",
     transparent : false,
+    premultipliedAlpha: true,
     blendMode : "normal",
     antiAlias : false,
     failIfMajorPerformanceCaveat : true,
@@ -65,7 +65,7 @@ function onresize() {
         var canvasMaxHeight = Infinity;
 
         if (globalThis.getComputedStyle) {
-            var style = globalThis.getComputedStyle(renderer.getScreenCanvas(), null);
+            var style = globalThis.getComputedStyle(renderer.getCanvas(), null);
             canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
@@ -119,6 +119,9 @@ function onresize() {
 
         // adjust scaling ratio based on the new scaling ratio
         scale(scaleX, scaleY);
+    } else {
+        // adjust scaling ratio based on the given settings
+        scale(settings.scale, settings.scale);
     }
 };
 
@@ -196,7 +199,6 @@ export let renderer = null;
  * @param {object} [options] The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
  * @param {string|HTMLElement} [options.parent=document.body] the DOM parent element to hold the canvas in the HTML file
  * @param {number} [options.renderer=video.AUTO] renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO)
- * @param {boolean} [options.doubleBuffering=false] enable/disable double buffering
  * @param {number|string} [options.scale=1.0] enable scaling of the canvas ('auto' for automatic scaling)
  * @param {string} [options.scaleMethod="fit"] screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
  * @param {boolean} [options.preferWebGL1=false] if true the renderer will only use WebGL 1
@@ -211,8 +213,7 @@ export let renderer = null;
  *     parent : "screen",
  *     renderer : me.video.AUTO,
  *     scale : "auto",
- *     scaleMethod : "fit",
- *     doubleBuffering : true
+ *     scaleMethod : "fit"
  * });
  */
 export function init(width, height, options) {
@@ -228,7 +229,6 @@ export function init(width, height, options) {
     // sanitize potential given parameters
     settings.width = width;
     settings.height = height;
-    settings.doubleBuffering = !!(settings.doubleBuffering);
     settings.transparent = !!(settings.transparent);
     settings.antiAlias = !!(settings.antiAlias);
     settings.failIfMajorPerformanceCaveat = !!(settings.failIfMajorPerformanceCaveat);
@@ -248,24 +248,21 @@ export function init(width, height, options) {
         console.log("melonJS 2 (v" + version + ") | http://melonjs.org" );
     }
 
-    // override renderer settings if &webgl is defined in the URL
+    // override renderer settings if &webgl or &canvas is defined in the URL
     var uriFragment = utils.getUriFragment();
     if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
         settings.renderer = WEBGL;
         if (uriFragment.webgl1 === true) {
             settings.preferWebGL1 = true;
         }
+    } else if (uriFragment.canvas === true) {
+        settings.renderer = CANVAS;
     }
 
     // normalize scale
     settings.scale = (settings.autoScale) ? 1.0 : (+settings.scale || 1.0);
     scaleRatio.set(settings.scale, settings.scale);
 
-    // force double buffering if scaling is required
-    if (settings.autoScale || (settings.scale !== 1.0)) {
-        settings.doubleBuffering = true;
-    }
-
     // hold the requested video size ratio
     designRatio = width / height;
     designWidth = width;
@@ -337,7 +334,7 @@ export function init(width, height, options) {
 
     // add our canvas (default to document.body if settings.parent is undefined)
     parent = device.getElement(typeof settings.parent !== "undefined" ? settings.parent : document.body);
-    parent.appendChild(renderer.getScreenCanvas());
+    parent.appendChild(renderer.getCanvas());
 
     // Mobile browser hacks
     if (device.platform.isMobile) {
@@ -434,8 +431,8 @@ export function getParent() {
  * @param {number} y y scaling multiplier
  */
 export function scale(x, y) {
-    var canvas = renderer.getScreenCanvas();
-    var context = renderer.getScreenContext();
+    var canvas = renderer.getCanvas();
+    var context = renderer.getContext();
     var settings = renderer.settings;
     var pixelRatio = device.devicePixelRatio;