OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <style type="text/css"> | 3 <style type="text/css"> |
4 video { | 4 video { |
5 display: none; | 5 display: none; |
6 } | 6 } |
7 </style> | 7 </style> |
8 </head> | 8 </head> |
9 <body> | 9 <body> |
10 <video id="video" width="30" height="30"> | 10 <video id="video" width="30" height="30"> |
11 <source src="resources/canvas_video.webm" type="video/webm" /> | 11 <source src="resources/canvas_video.webm" type="video/webm" /> |
12 </video> | 12 </video> |
13 <canvas id="videoOutput" width="150" height="150"></canvas> | 13 <canvas id="videoOutput" width="150" height="150"></canvas> |
14 <canvas id="imageOutput" width="150" height="150"></canvas> | 14 <canvas id="imageOutput" width="150" height="150"></canvas> |
15 <canvas id="canvasOutput" width="150" height="150"></canvas> | 15 <canvas id="canvasOutput" width="150" height="150"></canvas> |
| 16 <canvas id="offscreenCanvas2DOutput" width="150" height="150"></canvas> |
| 17 <canvas id="offscreenCanvasWebGLOutput" width="150" height="150"></canvas> |
16 | 18 |
17 <script> | 19 <script> |
18 function drawImageSourceToHTMLCanvas(imageSource, outputCanvas) { | 20 function drawImageSourceToHTMLCanvas(imageSource, outputCanvas) { |
19 var ctx = outputCanvas.getContext('2d'); | 21 var ctx = outputCanvas.getContext('2d'); |
20 | 22 |
21 ctx.drawImage(imageSource, 0, 0); | 23 ctx.drawImage(imageSource, 0, 0); |
22 ctx.drawImage(imageSource, 30, 30, 30, 30); | 24 ctx.drawImage(imageSource, 30, 30, 30, 30); |
23 // stretch the image | 25 // stretch the image |
24 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60); | 26 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60); |
25 // reduce the image | 27 // reduce the image |
(...skipping 22 matching lines...) Expand all Loading... |
48 var htmlCanvas = document.createElement('canvas'); | 50 var htmlCanvas = document.createElement('canvas'); |
49 htmlCanvas.width = 30; | 51 htmlCanvas.width = 30; |
50 htmlCanvas.height = 30; | 52 htmlCanvas.height = 30; |
51 var htmlCanvasCtx = htmlCanvas.getContext("2d"); | 53 var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
52 htmlCanvasCtx.fillStyle = "blue"; | 54 htmlCanvasCtx.fillStyle = "blue"; |
53 htmlCanvasCtx.fillRect(0, 0, 15, 30); | 55 htmlCanvasCtx.fillRect(0, 0, 15, 30); |
54 htmlCanvasCtx.fillStyle = "red"; | 56 htmlCanvasCtx.fillStyle = "red"; |
55 htmlCanvasCtx.fillRect(15, 0, 30, 30); | 57 htmlCanvasCtx.fillRect(15, 0, 30, 30); |
56 drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('canvasOutput'))
; | 58 drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('canvasOutput'))
; |
57 | 59 |
| 60 // Assume html and offscreen canvases should yield identical results |
| 61 drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('offscreenCanvas
2DOutput')); |
| 62 |
| 63 // Image source as OffscreenCanvas with webGL context |
| 64 var glCanvas = document.createElement('canvas'); |
| 65 glCanvas.width = glCanvas.height = 30; |
| 66 var gl = glCanvas.getContext("webgl"); |
| 67 gl.clearColor(0.0, 0.0, 1.0, 1.0); |
| 68 gl.clear(gl.COLOR_BUFFER_BIT); |
| 69 drawImageSourceToHTMLCanvas(glCanvas, document.getElementById('offscreenCanvasWe
bGLOutput')); |
| 70 |
58 </script> | 71 </script> |
59 </body> | 72 </body> |
60 | 73 |
OLD | NEW |