third_party/WebKit/LayoutTests/fast/canvas/canvas-hit-regions-path2d-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>Canvas Hit Regions: path2d test</title>
   5   <script src="../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <canvas id="canvas" width="400" height="400">
   9   <button id="face"></button>
  10   <button id="eyes"></button>
  11 </canvas>
  12
  13 <script src="./resources/canvas-hit-region-event.js"></script>
  14 <script>
  15
  16   var canvas = document.getElementById("canvas");
  17   var context = canvas.getContext("2d");
  18
  19   var face = new Path2D();
  20   context.fillStyle = "pink";
  21   face.arc(200, 175, 150, 0, Math.PI * 2, true);
  22   context.fill(face);
  23   context.addHitRegion({ id : "face", control : document.getElementById("face"), path : face });
  24
  25   var nose = new Path2D();
  26   context.fillStyle = "black";
  27   context.globalAlpha = .5;
  28   nose.moveTo(200, 165);
  29   nose.lineTo(240, 205);
  30   nose.lineTo(160, 205);
  31   nose.closePath();
  32   context.fill(nose);
  33   context.addHitRegion({ id : "nose", path : nose });
  34
  35   var mouth = new Path2D();
  36   context.fillStyle = "red";
  37   mouth.rect(125, 240, 150, 20);
  38   context.fill(mouth);
  39   context.addHitRegion({ id : "mouth", path : mouth });
  40
  41   var eyes = new Path2D();
  42   context.globalAlpha = 1;
  43   context.fillStyle = "blue";
  44   eyes.arc(150, 125, 25, 0, Math.PI * 2, true);
  45   eyes.arc(250, 125, 25, 0, Math.PI * 2, true);
  46   context.fill(eyes);
  47   context.addHitRegion({ id: "eye", control : document.getElementById("eyes"), path : eyes });
  48
  49   debug("Hit detection and mouse event tests");
  50   shouldBe("clickCanvas(100, 100)", "'face'");
  51   shouldBe("clickCanvas(200, 200)", "'nose'");
  52   shouldBe("clickCanvas(127, 242)", "'mouth'");
  53   shouldBe("clickCanvas(150, 125)", "'eye'");
  54   shouldBe("clickCanvas(250, 125)", "'eye'");
  55   shouldBe("clickCanvas(200, 125)", "'face'");
  56   shouldBe("clickCanvas(20, 10)", "null");
  57   debug("");
  58
  59 </script>
  60 </body>
  61 </html>