Using the CanvasResizer class to manage canvas size
With the CanvasResizer, you can set the canvas size several ways:
FIXED_RESOLUTION: Forces an integer scaling ratio like 2:1 or 3:1, perfect for pixel art based graphics.
Pixel-perfect rendering of this mode uses "imageRendering" style property when possible, and otherwise falls back
to creating an upscaled copy of the canvas with WebGL.
FIXED_RESOLUTION_INTERPOLATED: Fix the resolution of the canvas, but fill the screen by scaling it. This may result
in blurred graphics, but can be helpful in rapid prototyping.
FIXED_COORDINATE_SYSTEM: Simulate a fixed coordinate system by applying a transform to the canvas context. This is
in effect a better-quality version of FIXED_RESOLUTION_INTERPOLATED that works only with the 2D context.
FIXED_ASPECT_RATIO: Fill the screen with the canvas, but preserving aspect ratio.
DYNAMIC: Simply fill the screen with the canvas.
MINIMUM_RESOLUTION: Similar to FIXED_RESOLUTION, but canvas is allowed to grow from the edges to fill the screen.
MINIMUM_HEIGHT: Similar to MINIMUM_RESOLUTION, but canvas is only allowed to grow vertically.
MINIMUM_WIDTH: Similar to MINIMUM_RESOLUTION, but canvas is only allowed to grow horizontally.
With all of the modes, you can map touch and mouse events to the canvas coordinate space with a simple function call.
Try clicking or touching on the canvas, or resizing the browser window.