I'm having a problem getting the SizableCanvas to work. All I want is a canvas that I can draw on, scroll, and zoom in and out by using the pinch gesture.

So far I can draw on it and scroll it. But the zooming refuses to work. When I try the gesture, the image gitters madly but does not re-size.

Perhaps some kind soul can have pity on me and point out what I am doing wrong.

Index.html
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Map Test 4</title>
        <script src="../../../../1.0/framework/enyo.jsjsjs&$quot$; $launch$=&$quot$;$debug$&$quot$; $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;&$lt$;/$script$&$gt$;
    &$lt$;/$head$&$gt$;
    &$lt$;$body$&$gt$;
        &$lt$;$script$ $type$=&$quot$;$text$/$javascript$&$quot$;&$gt$;
            $new$ $MapTester$().$renderInto$($document$.$body$)
        &$lt$;/$script$&$gt$;
    &$lt$;/$body$&$gt$;
&$lt$;/$html$&$gt$;
MapTest.jsjsjs
Code:
enyo.kind({
   name: "MapTester",
   kind: "VFlexBox",
   components: [
      {kind:"Header", components: [
         {content: "Map Test 4", flex: 1},
         {kind:"Picker", value:"images/AlbionMap.png",
            items: [
               {caption: "Albion", value: "Albion" },
               {caption: "Lensman", value: "Lensman" },
               {caption: "Ogre", value: "Ogre" },
               {caption: "StarForce", value: "StarForce" },
               {caption: "StarForce X", value: "StarForceX" },
               {caption: "Stellar Conquest", value: "StellarConquest" },
               {caption: "Triplanetary", value: "Triplanetary" },
               {caption: "Voyage", value: "Voyage" },
               {caption: "WarpWar", value: "WarpWar" }
            ],
            onChange:"mapPick"
         },
      ]},
      {kind: "Scroller", flex:1, components: [
         {kind: "GameMap"}
      ]}
   ],
   initComponents: function() {
      this.inherited(arguments);
   },
   
   mapPick: function(inSender) {
      this.$.gameMap.changeGame(this.$.picker.getValue())
   },
});
GameMap.jsjsjs
Code:
enyo.kind({
   name: "GameMap",
   kind: "enyo.SizeableCanvas",
   
   create: function() {
      this.inherited(arguments);
      
      this.currentGame = "Albion";
      this.gameArt = {
         Albion: {
            map: "images/AlbionMap.png",
            piece1: {
               file: "images/Albion_Arnrock.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/Albion_Cormac.png",
               x: 182,
               y: 156
            },
         },
         Lensman: {
            map: "images/LensmanMap.png",
            piece1: {
               file: "images/Lensman_asc.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/Lensman_ama.png",
               x: 182,
               y: 156
            },
         },
         Ogre: {
            map: "images/OgreMap.jpg",
            piece1: {
               file: "images/Ogre_OgreV.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/Ogre_GEV.png",
               x: 182,
               y: 156
            },
         },
         StarForce: {
            map: "images/StarForceMap.png",
            piece1: {
               file: "images/StarForce_Teleship.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/StarForce_Stargate.png",
               x: 182,
               y: 156
            },
         },
         StarForceX: {
            map: "images/StarForceXMap.jpg",
            piece1: {
               file: "images/StarForce_Teleship.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/StarForce_Stargate.png",
               x: 182,
               y: 156
            },
         },
         StellarConquest: {
            map: "images/StellarConquestMap.png",
            piece1: {
               file: "images/StellarConquest_atk.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/StellarConquest_dn.png",
               x: 182,
               y: 156
            },
         },
         Triplanetary: {
            map: "images/TriplanetaryMap.png",
            piece1: {
               file: "images/Triplanetary_Dreadnaught.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/Triplanetary_Frigate.png",
               x: 182,
               y: 156
            },
         },
         Voyage: {
            map: "images/VoyageMap.jpg",
            piece1: {
               file: "images/Voyage_MirrorFly.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/Voyage_ReconBot.png",
               x: 182,
               y: 156
            },
         },
         WarpWar: {
            map: "images/WarpWarMap.png",
            piece1: {
               file: "images/WarpWar_SystemShip.png",
               x: 102,
               y: 96
            },
            piece2: {
               file: "images/WarpWar_WarpShip.png",
               x: 182,
               y: 156
            },
         },
      };
      
      this.mapBack = new Image();
      this.mapBack.src = this.gameArt[this.currentGame].map;
      
      this.counter1 = new Image();
      this.counter1.src = this.gameArt[this.currentGame].piece1.file;
      
      this.counter2 = new Image();
      this.counter2.src = this.gameArt[this.currentGame].piece2.file;
      
      this.setMaxZoomRatio(10);
      this.setZoom(3);
   },
   
   rendered: function() {
      this.context = this.fetchContext();
      this.resizeCanvas();
      this.drawCanvas();
   },
   
   changeGame: function(newGame) {
      this.currentGame = newGame;
      this.mapBack.src = this.gameArt[this.currentGame].map;
      this.counter1.src = this.gameArt[this.currentGame].piece1.file;
      this.counter2.src = this.gameArt[this.currentGame].piece2.file;
      
      this.resizeCanvas();
      this.drawCanvas();
   },
   
   resizeCanvas: function() {
      this.bufferImage = this.mapBack;
      this.sizeImage(this.mapBack.width, this.mapBack.height);
   },
   
   drawCanvas: function() {
      if (this.context != null) {
         this.drawBackground();   // erase old canvas, background is underneath everything
         this.drawCounters();
       } else {
          enyo.log("error, context is null");
       }
   },
   
   drawBackground: function() {
      this.context.drawImage(this.mapBack, 0, 0);
   },
   
   drawCounters: function() {
      this.context.drawImage(this.counter1, this.gameArt[this.currentGame].piece1.x, this.gameArt[this.currentGame].piece1.y);
      this.context.drawImage(this.counter2, this.gameArt[this.currentGame].piece2.x, this.gameArt[this.currentGame].piece2.y);
   },

});
A screen snapshot is available here
https://secure.flickr.com/photos/nyr...57627944430290