chrome-extensions-samples/apps/samples/webview-samples/shared-script/more_dragons.js

// Starting zoom for new dragons
var baseZoom = 1;

// Function to be run in the context of the webview guest page:
//
// The demo page has an animated dragon. Add a button, styled consistent with
// the page, labeled 'More dragons!' that will instantiate more dragons hooked
// up to the same animation timer.
function addMoreDragons() {
  var zoom = 1.0;
  // Create the button.
  var bttn = document.createElement("button");
  /*
   * Style the button to get a consistent look and feel.
   */
  bttn.innerText = 'More dragons!';
  bttn.classList.add('actionButton');
  bttn.setAttribute('style', 'padding: 10px; margin: 10px; display: block;');
  /*
   * Hook up the button to add more dragons to the page.
   */
  bttn.addEventListener('click', function() {
    // Add a new dragon.
    var newDragon = Dragon.create({ timer: $('timer'), width: 950, height: 1000});
    this.insertAdjacentHTML('afterend', newDragon.toHTML());
    newDragon.initHTML();

    // Scale down dragons.
    zoom *= 0.75;
    var timerID = $('timer').id;
    var dragons = document.querySelectorAll('canvas');
    var dragonsArr = Array.prototype.slice.call(dragons, 0);

    // The last canvas is the timer, not a dragon.
    dragonsArr.pop();

    dragonsArr.forEach(function(dragonCanvas) {
      dragonCanvas.style.zoom = zoom;
    });

  }.bind(bttn));
  // Add the button to the DOM.
  document.body.insertBefore(bttn, document.body.firstChild);
}