| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id="draw" style="background:black; border:solid" width="10" height="10"></canvas> |
| <img id="feedback-png" style="background:black; border:solid"> |
| <img id="feedback-jpeg" style="background:black; border:solid"> |
| <img id="feedback-webp" style="background:black; border:solid"> |
| <script> |
| var canvas = document.getElementById("draw"); |
| var gl = canvas.getContext("webgl", {premultipliedAlpha: true}); |
| gl.clearColor(0.5, 1, 0.3, 0.6); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| |
| var hiddenCanvas = document.createElement('canvas'); |
| hiddenCanvas.width = hiddenCanvas.height = 10; |
| var hiddengl = hiddenCanvas.getContext("webgl", {premultipliedAlpha: true}); |
| hiddengl.clearColor(0.5, 0.6, 0.3, 0.6); // green clamped to alpha |
| hiddengl.clear(gl.COLOR_BUFFER_BIT); |
| // Ref test requires encode/decode round trip in order to repro compression |
| // artifacts exactly. |
| document.getElementById("feedback-png").src = hiddenCanvas.toDataURL("image/png"); |
| document.getElementById("feedback-jpeg").src = hiddenCanvas.toDataURL("image/jpeg"); |
| document.getElementById("feedback-webp").src = hiddenCanvas.toDataURL("image/webp"); |
| </script> |
| </body> |
| </html> |
