I'm working towards a default resolution of 1366x756.
I would to scale this up and down depending on the viewport. Similar to the example shown here: http://blogs.msdn.com/b/davrous/archive/2012/04/06/modernizing-your-html5-canvas-games-with-offline-apis-file-apis-css3-amp-hardware-scaling.aspx
I'm kind of confused how I would get this to work in KineticJS as it abstracts away the canvas elements used.
What I would like to achieve is basically:
window.addEventListener("resize", OnResizeCalled, false);
function OnResizeCalled() {
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
}
I know that this isn't the perfect solution as this would stretch the canvas and not keep aspect ratio.
I'm currently using the following:
stage.setWidth(window.innerWidth);
stage.setHeight(window.innerHeight);
stage.setScale(window.innerWidth / 1366)
It's more or less what I'm looking for, but:
mouse/touch actions aren't scaled to the new proportions.
not the native scaling which uses the GPU to upscale the canvas object.
Any ideas? Thanks :)