| <title>Canvas Hit Regions: path2d test</title> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| <body> |
| <canvas id='canvas' width='400' height='400'> |
| <button id='face'></button> |
| <button id='eyes'></button> |
| </canvas> |
| |
| <script src='./resources/canvas-hit-region-event.js'></script> |
| <script> |
| |
| test(function(t) { |
| var canvas = document.getElementById('canvas'); |
| var context = canvas.getContext('2d'); |
| |
| var face = new Path2D(); |
| context.fillStyle = 'pink'; |
| face.arc(200, 175, 150, 0, Math.PI * 2, true); |
| context.fill(face); |
| context.addHitRegion({ id : 'face', control : document.getElementById('face'), path : face }); |
| |
| var nose = new Path2D(); |
| context.fillStyle = 'black'; |
| context.globalAlpha = .5; |
| nose.moveTo(200, 165); |
| nose.lineTo(240, 205); |
| nose.lineTo(160, 205); |
| nose.closePath(); |
| context.fill(nose); |
| context.addHitRegion({ id : 'nose', path : nose }); |
| |
| var mouth = new Path2D(); |
| context.fillStyle = 'red'; |
| mouth.rect(125, 240, 150, 20); |
| context.fill(mouth); |
| context.addHitRegion({ id : 'mouth', path : mouth }); |
| |
| var eyes = new Path2D(); |
| context.globalAlpha = 1; |
| context.fillStyle = 'blue'; |
| eyes.arc(150, 125, 25, 0, Math.PI * 2, true); |
| eyes.arc(250, 125, 25, 0, Math.PI * 2, true); |
| context.fill(eyes); |
| context.addHitRegion({ id: 'eye', control : document.getElementById('eyes'), path : eyes }); |
| |
| // Hit detection and mouse event tests'); |
| assert_equals(clickCanvas(100, 100), 'face'); |
| assert_equals(clickCanvas(200, 200), 'nose'); |
| assert_equals(clickCanvas(127, 242), 'mouth'); |
| assert_equals(clickCanvas(150, 125), 'eye'); |
| assert_equals(clickCanvas(250, 125), 'eye'); |
| assert_equals(clickCanvas(200, 125), 'face'); |
| assert_equals(clickCanvas(20, 10), null); |
| |
| }, 'Test that createImageBitmap from a bitmaprenderer canvas produces correct result'); |
| </script> |
| </body> |
