This page is work-in-progress. You can reach me on twitter or mail to rezoner1337@gmail.com

Size and scaling

Playground application takes three variables to describe window dimensions.

width, height and scale.

The short story is that you can provide all - just one - or none - and playground will figure out the rest.

All the cases

Container dimensions are 800x300.

Generic rule: if scaled viewport is to small it will get centered.

0) Nothing - fullscreen

playground({
  render: TEMP.showDimensions,
  container: exampleContainer
});

1) All dimensions and scale provided

playground({
  width: 200,  
  height: 100,  
  scale: 2,
  render: TEMP.showDimensions,
  container: exampleContainer
});

2) One dimension

playground({
  width: 640,      
  render: TEMP.showDimensions,
  container: exampleContainer
});

3) Two dimensions no scale

playground({
  width: 300,      
  height: 200,      
  render: TEMP.showDimensions,
  container: exampleContainer
});

4) One dimensions and scale

playground({
  width: 300,      
  scale: 1,
  render: TEMP.showDimensions,
  container: exampleContainer
});

4) Scale only

playground({
  scale: 2,
  render: TEMP.showDimensions,
  container: exampleContainer
});

Pixelated

playground({
  smoothing: false,
  scale: 2,
  create: TEMP.loadImage,
  render: TEMP.renderImage,
  container: exampleContainer
});

Interpolated

playground({
  scale: 2,
  create: TEMP.loadImage,
  render: TEMP.renderImage,
  container: exampleContainer
});

Ask question:

Fork me on GitHub