| <!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}); |
| // green component larger than alpha: will cause an overflow when unmultiplied |
| gl.clearColor(0.5, 1, 0.3, 0.6); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| document.getElementById("feedback-png").src = canvas.toDataURL("image/png"); |
| document.getElementById("feedback-jpeg").src = canvas.toDataURL("image/jpeg"); |
| document.getElementById("feedback-webp").src = canvas.toDataURL("image/webp"); |
| </script> |
| </body> |
| </html> |
