Hi, I'm trying to make the HTML5 canvas responsive to changes in its container element's size.

Setting the canvas width to 100% via CSS achieves the desired effect, however, I cannot figure out how to reset the zoom scale of the MindFusion diagram so the ShapeNodes on the canvas look crisp. The canvas will resize, but all of the MF elements look fuzzy and the zooming behavior gets messed up. I've tried using `canvas.setBounds()` and various other methods in the `diagram` class, but haven't been successful.

Here's some code that I am using to achieve the resizing effect. Using MVC 5, Angular 1.5.8, and latest MindFusion builds.

#my-canvas {
  width: 100%;
}
 

function scaleCanvas (scale) {
  scale = scale || 1;
  var viewport = angular.element('#viewport');
  var point = canvas.clientToDoc({ x: viewport.width() * scale, y: viewport.height() * scale });
  var dim = {
    width: point.x,
    height: point.y
  };
  var rect = new MindFusion.Drawing.Rect(0, 0, Math.floor(dim.width), Math.floor(dim.height));
  canvas.setBounds(rect);  // Instance of MindFusion Diagram fed in via Angular service, code omitted
  canvas.setZoomToRect(rect);
}
 

Thank you!

Sorry, the `zoomFactor` was a typo in my post, but not in the actual code.

The `sizeChanged` event seems to only be called with the size is changed programmatically, which makes it difficult to work with when wanting a responsive canvas. When the canvas is resized via browser restrictions or other means with the `width: 100%` property, the `sizeChanged` event isn't called. Is this intended, or is there another event that I can use that will watch for changes of the actual canvas element itself? I guess I am looking for an API method that will resize the canvas element and the MindFusion diagram's bounds automatically, based on the size of the containing element.

It seems in my testing that the actual MindFusion diagram doesn't know where the bounds of the canvas element are, as it seems that even when the actual canvas element size changes the MindFusion `diagram.getBounds()` method returns the same value.

Diagram.Bounds defines the origin and size of diagram's local coordinate system. Bounds size * MeasureUnit size determines the canvas element size, but not its offset in the page (which you can control or access using regular DOM APIs).

For example, if you set Bounds to (-500,-500,1000,1000), you can place elements at coordinates in that range, and scroll to them if parent div is smaller. Calling zoomToRect(getBounds()) will fit that 1000x1000 logical units rectangle inside the parent div's size in pixels.

You can handle the window.resize event to detect size changed by user.

You shouldn't change width and height of the canvas, but the size of its parent div instead. The div also implements scrolling, so if it gets smaller than the canvas size determined by Bounds and MeasureUnit, it will show scrollbars to let you scroll.