Support for non-DOM canvases/contexts (backed by bitaps).

samples/openglui/src/openglui_canvas_tests.dart

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 //
 // Canvas API tests. Some of these are adapted from:
 //
 // http://www.html5canvastutorials.com/
 
 library openglui_canvas_tests;
 
@@ skipping 472 matching lines @@
   ctx.lineDashOffset = 1;
   ctx.strokeStyle = "#00FF00";
   ctx.strokeRect(width / 4, height / 5, width / 20, height / 8);
   ctx.setLineDash([]);
   ctx.strokeStyle = "#0000FF";
   ctx.strokeStyle = "rgba(128,128,128, 0.5)";
   ctx.strokeRect(width / 5, height / 10, width / 2, height / 8);
   log("Width = $width");
 }
 
-// TODO(gram) - apparently a canvas can have only one op in its lifetime,
-// so this test won't work until we can use off-screen canvases.
-void compositeOp() {
-  initTest("Composition");
-  var num = 0;
-  ctx.font = '10pt Verdana';
-  var numPerRow = width ~/ 95;
-  log("Width = $width, numPerRow = $numPerRow\n");
-  for (var mode in [ 'source-atop', 'source-in',
-                     'source-out', 'source-over',
-                     'destination-atop', 'destination-in',
-                     'destination-out', 'destination-over',
-                     'lighter', 'darker',
-                     'xor', 'copy']) {
-    var col = num % numPerRow;
-    var row = num ~/ numPerRow;
-    ctx.globalCompositeOperation = mode;
-    ctx.translate(95 * col, 100 * row);
-    log("Doing $mode at row $row, col $col\n");
-    ctx.beginPath();
-    ctx.rect(0, 0, 55, 55);
-    ctx.fillStyle = 'blue';
-    ctx.fill();
-    ctx.beginPath();
-    ctx.arc(50, 50, 35, 0, 2 * Math.PI, false);
-    ctx.fillStyle = 'red';
-    ctx.fill();
-    ctx.fillStyle = 'black';
-    ctx.fillText(mode, 0, 100);
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ++num;
-  }
-}
-
 void loadImage() {
   initTest("Image loading");
   var imageObj = new ImageElement();
   imageObj.on.load.add((e) {
     ctx.drawImage(imageObj, 69, 50);
   });
   imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.bmp';
 }
 
 void clip() {
@@ skipping 54 matching lines @@
   // translate context to center of canvas
   ctx.translate(width / 2, height / 2);
 
   // apply custom transform
   ctx.transform(1, sy, sx, 1, 0, 0);
 
   ctx.fillStyle = 'blue';
   ctx.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight);
 }
 
-int numtests = 21;
-int testnum = numtests - 1; // Start with latest.
+void composite() {
+  initTest("Composition");
+  var num = 0;
+  var numPerRow = width ~/ 150;
+  var tempCanvas = new CanvasElement(width: width, height:height);
+  var tempContext = tempCanvas.getContext("2d");
+  log("Width = $width, numPerRow = $numPerRow\n");
+  for (var mode in [ 'source-atop', 'source-in',
+                     'source-out', 'source-over',
+                     'destination-atop', 'destination-in',
+                     'destination-out', 'destination-over',
+                     'lighter', 'darker',
+                     'xor', 'copy']) {
+    tempContext.save();
+    tempContext.clearRect(0, 0, width, height);
+    tempContext.beginPath();
+    tempContext.rect(0, 0, 55, 55);
+    tempContext.fillStyle = 'blue';
+    tempContext.fill();
+
+    tempContext.globalCompositeOperation = mode;
+    tempContext.beginPath();
+    tempContext.arc(50, 50, 35, 0, 2 * Math.PI, false);
+    tempContext.fillStyle = 'red';
+    tempContext.fill();
+    tempContext.restore();
+    tempContext.font = '10pt Verdana';
+    tempContext.fillStyle = 'black';
+    tempContext.fillText(mode, 0, 100);
+    if (num > 0) {
+      if ((num % numPerRow) == 0) {
+        ctx.translate(-150 * (numPerRow-1), 150);
+      } else {
+        ctx.translate(150, 0);
+      }
+    }
+    ctx.drawImage(tempCanvas, 0, 0);
+    ++num;
+  }
+}
+
+int testnum = -1; // Start with latest.
 
 void update() {
   if (!isDirty) return;
   switch(testnum) {
     case 0:
       helloWorld();
       break;
     case 1:
       smiley();
       break;
@@ skipping 47 matching lines @@
       break;
     case 18:
       loadImage();
       break;
     case 19:
       clip();
       break;
     case 20:
       shear();
       break;
+    case 21:
+      composite();
+      break;
     default:
-      testnum = 0;
+      if (testnum < 0) {
+        testnum = 21;
+      } else {
+        testnum = 0;
+      }
       update();
       break;
   }
   isDirty = false;
 }
 
 /*
 TODO(gram): below are the current entry points for input events for the
 native code version. We need to integrate these somehow with the WebGL
 version:
@@ skipping 20 matching lines @@
   isDirty = true;
   log("Marking dirty");
 }
 
 onKeyUp(num when, int flags, int keycode, int metastate, int repeat) {}
 
 onKeyMultiple(num when, int flags, int keycode, int metastate, int repeat) {
 }