canvas-compositing-test.html (2845B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <title>Canvas Compositing Test</title> 12 <link rel="stylesheet" href="../resources/js-test-style.css"/> 13 <script src="../js/js-test-pre.js"></script> 14 <script src="../js/webgl-test-utils.js"> </script> 15 </head> 16 <body> 17 Below are 2 50x50 pixel canvas but using CSS to display them at 100x100 pixels. <br/> 18 They are solid black with a red triangle<br/> 19 They each have a 10px CSS solid black border around them.<br/> 20 Depending on how the browser composites the canvas with the page they will get 21 a white outline<hr/> 22 <div> 23 2d canvas<br/> 24 <canvas id="example2" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas> 25 </div> 26 <hr/> 27 3d canvas<br/> 28 <div> 29 <canvas id="example" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas> 30 </div> 31 <hr/> 32 img tag<br/> 33 <img src="50x50pixel-black-with-red-triangle.png" style="width: 100px; height: 100px; border: 10px solid black;"/> 34 <div id="description"></div> 35 <div id="console"></div> 36 <script id="vshader" type="x-shader/x-vertex"> 37 attribute vec4 vPosition; 38 void main() 39 { 40 gl_Position = vPosition; 41 } 42 </script> 43 44 <script id="fshader" type="x-shader/x-fragment"> 45 void main() 46 { 47 gl_FragColor = vec4(1.0,0.0,0.0,1.0); 48 } 49 </script> 50 51 <script> 52 "use strict"; 53 function init() 54 { 55 var wtu = WebGLTestUtils; 56 var canvas2d = document.getElementById("example2"); 57 var ctx2d = canvas2d.getContext("2d"); 58 ctx2d.fillStyle = "rgba(0, 0, 0, 255)" 59 ctx2d.fillRect(0, 0, 50, 50); 60 ctx2d.fillStyle = "rgba(255, 0, 0, 255)" 61 ctx2d.beginPath(); 62 ctx2d.moveTo(25, 12.5); 63 ctx2d.lineTo(12.5, 37.5); 64 ctx2d.lineTo(37.5, 37.5); 65 ctx2d.lineTo(25, 12.5); 66 ctx2d.fill(); 67 68 69 var gl = wtu.create3DContext("example"); 70 var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition"]); 71 72 var vertexObject = gl.createBuffer(); 73 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject); 74 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW); 75 gl.enableVertexAttribArray(0); 76 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 77 78 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 79 gl.drawArrays(gl.TRIANGLES, 0, 3); 80 } 81 82 init(); 83 var successfullyParsed = true; 84 </script> 85 </body> 86 <script src="../js/js-test-post.js"></script> 87 </body> 88 </html>