Merge 400766c into 3430c91

src/Canvas.js

@@ -33,12 +33,9 @@ export default class Canvas {
    * @returns { Object } - Canvas
    */
   load() {
-    const isImage = this.element.complete !== undefined
-    const isVideo = this.element.oncanplay !== undefined
-
-    if (isImage && !this.element.complete) {
+    if (this.isImage() && !this.element.complete) {
       this.element.onload = () => this.onElementLoaded()
-    } else if (isVideo && !this.element.oncanplay) {
+    } else if (this.isVideo() && !this.element.oncanplay) {
       this.element.onload = this.element.oncanplay = () => this.onElementLoaded()
     } else {
       this.onElementLoaded()
@@ -86,15 +83,22 @@ export default class Canvas {
     }
 
     // zoom the element if necessary
-    if (nh <= size.height + size.height * this.opts.safeHeight) {
-      nw += nw * this.opts.safeHeight
-      nh += nh * this.opts.safeHeight
+    const zoom = nh / size.height * (1 + this.opts.safeHeight)
+    if (zoom > 1) {
+      nw *= zoom
+      nh *= zoom
     }
 
     // calculate the offset top/left rounding it
     offsetTop = -~~((nh - size.height) / 2)
     offsetLeft = -~~((nw - size.width) / 2)
 
+    // add CSS styles for non-media elements
+    if (!this.isImage() && !this.isVideo()) {
+      this.element.style.width = `${nw}px`
+      this.element.style.height = `${nh}px`
+    }
+
     this.element.width = nw
     this.element.height = nh
     this.element.style.top = `${offsetTop}px`
@@ -122,6 +126,22 @@ export default class Canvas {
     return this
   }
 
+  /**
+   * Check if the current element is an image
+   * @returns boolean
+   */
+  isImage() {
+    return this.element instanceof HTMLImageElement && this.element.complete !== undefined
+  }
+
+  /**
+   * Check if the current element is a video
+   * @returns boolean
+   */
+  isVideo() {
+    return this.element instanceof HTMLVideoElement && this.element.oncanplay !== undefined
+  }
+
   /**
    * Get the parent wrapper bounds
    * @returns { Object } - parent tag bounds properties
@@ -150,4 +170,4 @@ export default class Canvas {
       width: props.width | 0
     }
   }
-}
+}