4 <title>Test drawImage(canvas) with canvas with different composite modes.
</title>
5 <script src=
"resources/canvas-composite-image-common.js"></script>
6 <script type=
"application/x-javascript">
7 function drawImage(context, compositeIndex, alpha) {
8 context.globalCompositeOperation = compositeTypes[compositeIndex];
10 context.globalAlpha =
0.5;
11 var sourceElement = document.getElementById('source-canvas');
12 context.drawImage(sourceElement,
10,
10);
15 function setupTest() {
16 var imageElement = document.getElementById('image');
17 var canvas = document.getElementById('source-canvas');
18 canvas.width = imageElement.width;
19 canvas.height = imageElement.height;
20 var context = canvas.getContext('
2d');
21 context.drawImage(imageElement,
0,
0);
25 <style type=
"text/css">
26 body
{ margin: 5px; font-family: arial
,verdana
,helvetica
; background: #fff; }
27 canvas
{ border: 1px solid
#999; }
28 canvas#source-canvas
{ border: none
; }
30 #output h1
{ font-size: medium
; font-weight: normal
; }
31 #output h2
{ font-size: small
; font-weight: normal
; }
32 #output div
{ font-size: small
; margin: 0px; }
33 #output .pass
{ color: green
; }
34 #output .fail
{ color: rgb
(255, 0, 0); }
35 #output .error
{ color: rgb
(255, 0, 64); }
36 td
{ padding: 2px 5px; }
37 table
{ border-collapse: collapse
; }
40 <body onload='runTest(
"dumpAsText");'
>
41 <div>Test Results
</div>
42 <div><table id='outputtable'
></table></div>
44 <div><img id =
"image" src=
"data:image/png;base64,
45 iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
46 AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
47 DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
48 FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
49 iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
52 <div>Source Canvas
</div>
53 <div><canvas id =
"source-canvas"></canvas></div>
54 <div>Test Output
</div>
55 <div id='output'
></div>