Size vs. Scale

Item sizes are configured, such as an image’s width or a text item’s font size. The size defines how large the item will be rendered as a bitmap into video memory. That bitmap can then be streched using the scale property. Stretching the bitmap larger will cause pixelation. To avoid the pixelation, you can use a larger size, but that will consume more memory.

The first story draws the word "font" at 30 percent of the page height. It then scales up from 100 percent to 1000 percent. The pixelation result of scaling a bitmap up 10X is obvious.

No Pixelation

The second story can be viewed by clicking the button labeled 2 under the editor. It is almost identical to the first story. However, the font is ten times larger, at 300 percent of the page height. The starting and ending scales are one-tenth of the first story, scaling up from 10 percent to 100 percent. As you can see, the text has nice clean edges. However, more video memory is consumed.

story = {
  item:  {
    text:"font",
    init: {
      pos:[-50,-50], anchor:[-50,-50],
      origin:[-50,-50], color:"#456",
      font:30, scale:100
    },
    action: {
      anim:{ dur:5, rep:[1,'yoyo'] },
      scale:1000
    }
  }
};
story = {
  item:  {
    text:"font",
    init: {
      pos:[-50,-50], anchor:[-50,-50],
      origin:[-50,-50], color:"#456",
      font:300, scale:10
    },
    action: {
      anim:{ dur:5, rep:[1,'yoyo'] },
      scale:100
    }
  }
};