Cleanup

Author: kurkle

src/core/core.controller.js

@@ -247,9 +247,8 @@ class Chart {
 		// Before init plugin notification
 		plugins.notify(me, 'beforeInit');
 
-		// helpers.dom.retinaScale(me, me.options.devicePixelRatio);
-
 		if (me.options.responsive) {
+			// Initial resize before chart draws (must be silent to preserve initial animations).
 			me.resize(true);
 		} else {
 			helpers.dom.retinaScale(me, me.options.devicePixelRatio);
@@ -299,6 +298,7 @@ class Chart {
 		}
 		// the canvas render width and height will be casted to integers so make sure that
 		// the canvas display style uses the same integer values to avoid blurring effect.
+		// Set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
 		const newWidth = Math.max(0, Math.floor(width));
 		const newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : height));
 
@@ -909,7 +909,7 @@ class Chart {
 		if (canvas) {
 			me.unbindEvents();
 			helpers.canvas.clear(me);
-			me.platform.releaseContext(me, me.ctx);
+			me.platform.releaseContext(me.ctx);
 			me.canvas = null;
 			me.ctx = null;
 		}
@@ -939,10 +939,10 @@ class Chart {
 		});
 
 		if (me.options.responsive) {
-			// resize
 			listener = function(width, height) {
 				me.resize(false, width, height);
 			};
+
 			me.platform.addEventListener(me, 'resize', listener);
 			listeners.resize = listener;
 		}

src/platform/platform.dom.js

@@ -46,7 +46,7 @@ function readUsedSize(element, property) {
  * since responsiveness is handled by the controller.resize() method. The config is used
  * to determine the aspect ratio to apply in case no explicit height has been specified.
  */
-function initCanvas(canvas, config) { // eslint-disable-line no-unused-vars
+function initCanvas(canvas, config) {
 	const style = canvas.style;
 
 	// NOTE(SB) canvas.getAttribute('width') !== canvas.width: in the first case it
@@ -250,18 +250,21 @@ function unlistenForResize(proxies) {
  * @param {Function} listener
  */
 function listenForResize(canvas, proxies, listener) {
+	// Helper for recursing when canvas is detached from it's parent
 	const detached = () => listenForResize(canvas, proxies, listener);
 
-	// Canvas was detached from it's parent
+	// First make sure all observers are removed
 	unlistenForResize(proxies);
+	// Then check if we are attached
 	const container = _getParentNode(canvas);
 	if (container) {
-		// The canvas was immediately re-attached
+		// The canvas is attached (or was immediately re-attached when called through `detached`)
 		proxies.resize = watchForResize(container, listener);
 		proxies.detach = watchForDetachment(canvas, detached);
 	} else {
+		// The canvas is detached
 		proxies.attach = watchForAttachment(canvas, () => {
-			// The canvas was attached
+			// The canvas was attached.
 			removeObserver(proxies, 'attach');
 			const parent = _getParentNode(canvas);
 			proxies.resize = watchForResize(parent, listener);
@@ -276,14 +279,6 @@ function listenForResize(canvas, proxies, listener) {
  */
 export default class DomPlatform extends BasePlatform {
 
-	/**
-	 * Initializes resources that depend on platform options.
-	 * @param {HTMLCanvasElement} canvas - The Canvas element.
-	 * @private
-	 */
-	_ensureLoaded(canvas) { // eslint-disable-line no-unused-vars
-	}
-
 	acquireContext(canvas, config) {
 		// To prevent canvas fingerprinting, some add-ons undefine the getContext
 		// method, for example: https://github.com/kkapsner/CanvasBlocker
@@ -300,15 +295,14 @@ export default class DomPlatform extends BasePlatform {
 		if (context && context.canvas === canvas) {
 			// Load platform resources on first chart creation, to make it possible to
 			// import the library before setting platform options.
-			this._ensureLoaded(canvas);
 			initCanvas(canvas, config);
 			return context;
 		}
 
 		return null;
 	}
 
-	releaseContext(context) { // eslint-disable-line no-unused-vars
+	releaseContext(context) {
 		const canvas = context.canvas;
 		if (!canvas[EXPANDO_KEY]) {
 			return false;