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 drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) { | 20 function drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) { |
19 var aCanvas = new OffscreenCanvas(150, 150); | 21 var aCanvas = new OffscreenCanvas(150, 150); |
20 var ctx = aCanvas.getContext('2d'); | 22 var ctx = aCanvas.getContext('2d'); |
21 | 23 |
22 ctx.drawImage(imageSource, 0, 0); | 24 ctx.drawImage(imageSource, 0, 0); |
23 ctx.drawImage(imageSource, 30, 30, 30, 30); | 25 ctx.drawImage(imageSource, 30, 30, 30, 30); |
24 // stretch the image | 26 // stretch the image |
25 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60); | 27 ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60); |
(...skipping 26 matching lines...) Expand all Loading... |
52 var htmlCanvas = document.createElement('canvas'); | 54 var htmlCanvas = document.createElement('canvas'); |
53 htmlCanvas.width = 30; | 55 htmlCanvas.width = 30; |
54 htmlCanvas.height = 30; | 56 htmlCanvas.height = 30; |
55 var htmlCanvasCtx = htmlCanvas.getContext("2d"); | 57 var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
56 htmlCanvasCtx.fillStyle = "blue"; | 58 htmlCanvasCtx.fillStyle = "blue"; |
57 htmlCanvasCtx.fillRect(0, 0, 15, 30); | 59 htmlCanvasCtx.fillRect(0, 0, 15, 30); |
58 htmlCanvasCtx.fillStyle = "red"; | 60 htmlCanvasCtx.fillStyle = "red"; |
59 htmlCanvasCtx.fillRect(15, 0, 30, 30); | 61 htmlCanvasCtx.fillRect(15, 0, 30, 30); |
60 drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutp
ut')); | 62 drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutp
ut')); |
61 | 63 |
| 64 // image source as OffscreenCanvas with 2D context |
| 65 var offscreenCanvas2D = new OffscreenCanvas(30, 30); |
| 66 var offscreenCanvas2DCtx = offscreenCanvas2D.getContext("2d"); |
| 67 offscreenCanvas2DCtx.fillStyle = "blue"; |
| 68 offscreenCanvas2DCtx.fillRect(0, 0, 15, 30); |
| 69 offscreenCanvas2DCtx.fillStyle = "red"; |
| 70 offscreenCanvas2DCtx.fillRect(15, 0, 30, 30); |
| 71 drawImageSourceToOffscreenCanvas(offscreenCanvas2D, document.getElementById('off
screenCanvas2DOutput')); |
| 72 |
| 73 // Image source as OffscreenCanvas with webGL context |
| 74 var offscreenCanvasWebGL = new OffscreenCanvas(30, 30); |
| 75 var gl = offscreenCanvasWebGL.getContext("webgl"); |
| 76 gl.clearColor(0.0, 0.0, 1.0, 1.0); |
| 77 gl.clear(gl.COLOR_BUFFER_BIT); |
| 78 drawImageSourceToOffscreenCanvas(offscreenCanvasWebGL, document.getElementById('
offscreenCanvasWebGLOutput')); |
| 79 |
62 </script> | 80 </script> |
63 </body> | 81 </body> |
64 | 82 |
OLD | NEW |