Skip to content
This repository has been archived by the owner on Oct 28, 2023. It is now read-only.

Resize UmlCanvas to 100pct

Jump to bottom
christophevg edited this page Jun 24, 2011 · 1 revision

Q: "I want to scale the canvas to 100% and setting that in the html seems to result in the canvas defaulting to a size of 100px."

A: The canvas element only accepts sizes expressed in pixels. Providing width="100%" height="100%" is actually interpreted as width="100px" height="100px". You have to rely on some Javascript to resize the canvas element. In case of UmlCanvas this can be achieved as is described in the following example:

<html>
<head>
	<script src="http://get.umlcanvas.org/current.min.js"></script>
</head>
<body>
	<!-- 
		a basic UmlCanvas with in-document source: we don't specify any initial
		width nor height, we're going to set it dynamically later on.
	 -->
	<canvas id="test" class="UmlCanvas"></canvas>
	<pre id="testSource" style="display:none">
		+dynamic diagram myDiagram {
			[@10,10]
			class myclass {
				attribute myAttribute:String;
			}
		}
	</pre>
	<script>
	// wait until UmlCanvas is ready before accessing the actual UmlCanvas
	// instance.
	UmlCanvas.on( "ready", function wireAutoSizing() {
		// use the standard UmlCanvas getModel() method to get a reference to
		// the UmlCanvas
		var model = UmlCanvas.getModel( "test" );

		// we need a little trick here to avoid the height never to be updated
		// before "measuring" the height, we need to resize the canvas as to not
		// have it force the window to be larger
		function maximizeCanvas() {
			model.setSize( 1,1 );
			model.setSize( document.body.offsetWidth, document.body.offsetHeight );
		}

		// call it everytime the window resizes
		window.onresize = maximizeCanvas;
		// and call it once to initially grow to the (so far) not-resized widow
		maximizeCanvas();
	} );
	</script>
</body>
</html>
Clone this wiki locally