canvas-compositing-test.html

Enable keyboard shortcuts

<!--

Copyright (c) 2019 The Khronos Group Inc.

Use of this source code is governed by an MIT-style license that can be

found in the LICENSE.txt file.

-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Canvas Compositing Test</title>

<link rel="stylesheet" href="../resources/js-test-style.css"/>

<script src="../js/js-test-pre.js"></script>

<script src="../js/webgl-test-utils.js"> </script>

</head>

<body>

Below are 2 50x50 pixel canvas but using CSS to display them at 100x100 pixels. <br/>

They are solid black with a red triangle<br/>

They each have a 10px CSS solid black border around them.<br/>

Depending on how the browser composites the canvas with the page  they will get

a white outline<hr/>

<div>

2d canvas<br/>

<canvas id="example2" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>

</div>

<hr/>

3d canvas<br/>

<div>

<canvas id="example" width="50" height="50" style="width: 100px; height: 100px; border: 10px solid black;"></canvas>

</div>

<hr/>

img tag<br/>

<img src="50x50pixel-black-with-red-triangle.png" style="width: 100px; height: 100px; border: 10px solid black;"/>

<div id="description"></div>

<div id="console"></div>

    <script id="vshader" type="x-shader/x-vertex">

        attribute vec4 vPosition;

        void main()

            gl_Position = vPosition;

    </script>

    <script id="fshader" type="x-shader/x-fragment">

        void main()

            gl_FragColor = vec4(1.0,0.0,0.0,1.0);

    </script>

    <script>

        "use strict";

        function init()

            var wtu = WebGLTestUtils;

            var canvas2d = document.getElementById("example2");

            var ctx2d = canvas2d.getContext("2d");

            ctx2d.fillStyle = "rgba(0, 0, 0, 255)"

            ctx2d.fillRect(0, 0, 50, 50);

            ctx2d.fillStyle = "rgba(255, 0, 0, 255)"

            ctx2d.beginPath();

            ctx2d.moveTo(25, 12.5);

            ctx2d.lineTo(12.5, 37.5);

            ctx2d.lineTo(37.5, 37.5);

            ctx2d.lineTo(25, 12.5);

            ctx2d.fill();

            var gl = wtu.create3DContext("example");

            var program = wtu.setupProgram(gl, ["vshader", "fshader"], ["vPosition"]);

            var vertexObject = gl.createBuffer();

            gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,0.5,0, -0.5,-0.5,0, 0.5,-0.5,0 ]), gl.STATIC_DRAW);

            gl.enableVertexAttribArray(0);

            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            gl.drawArrays(gl.TRIANGLES, 0, 3);

       init();

       var successfullyParsed = true;

    </script>

</body>

<script src="../js/js-test-post.js"></script>

</body>

</html>