| <html> |
| <body> |
| <canvas id="c1" width="250" height="250"></canvas> |
| <canvas id="c2" width="250" height="250"></canvas> |
| <br> |
| <canvas id="c3" width="250" height="250"></canvas> |
| <canvas id="c4" width="250" height="250"></canvas> |
| <script type="text/javascript"> |
| var canvas1 = document.getElementById('c1'); |
| var canvas2 = document.getElementById('c2'); |
| var canvas3 = document.getElementById('c3'); |
| var canvas4 = document.getElementById('c4'); |
| var bgcanvas = document.createElement('canvas'); |
| bgcanvas.width = 100; |
| bgcanvas.height = 100; |
| var bgctx = bgcanvas.getContext('2d'); |
| bgctx.fillStyle = 'green'; |
| bgctx.fillRect(0, 0, bgcanvas.width, bgcanvas.height); |
| |
| var bgcanvasLowerRight = document.createElement('canvas'); |
| bgcanvasLowerRight.width = 100; |
| bgcanvasLowerRight.height = 100; |
| var bgctxLowerRight = bgcanvasLowerRight.getContext('2d'); |
| bgctxLowerRight.fillStyle = 'green'; |
| bgctxLowerRight.fillRect(-50, -50, 100, 100); |
| |
| var bgcanvasUpperLeft = document.createElement('canvas'); |
| bgcanvasUpperLeft.width = 100; |
| bgcanvasUpperLeft.height = 100; |
| var bgctxUpperLeft = bgcanvasUpperLeft.getContext('2d'); |
| bgctxUpperLeft.fillStyle = 'green'; |
| bgctxUpperLeft.fillRect(0, 0, bgcanvasUpperLeft.width/2, bgcanvasUpperLeft.height/2); |
| |
| var bgcanvasCenter = document.createElement('canvas'); |
| bgcanvasCenter.width = 100; |
| bgcanvasCenter.height = 100; |
| var bgctxCenter = bgcanvasCenter.getContext('2d'); |
| bgctxCenter.fillStyle = 'green'; |
| bgctxCenter.fillRect(-50, -50, 300, 300); |
| |
| var ctx1 = canvas1.getContext('2d'); |
| var ctx2 = canvas2.getContext('2d'); |
| var ctx3 = canvas3.getContext('2d'); |
| var ctx4 = canvas4.getContext('2d'); |
| |
| var srcCanvases = [bgcanvas, bgcanvasLowerRight, bgcanvasUpperLeft, bgcanvasCenter]; |
| var dstCtxs = [ctx1, ctx2, ctx3, ctx4]; |
| |
| for (var i = 0; i < dstCtxs.length; ++i) { |
| var srcCanvas = srcCanvases[i]; |
| var ctx = dstCtxs[i]; |
| ctx.drawImage(srcCanvas, -100, -100, 300, 300, -25, -25, 300, 300); |
| ctx.drawImage(srcCanvas, -100, -100, 200, 200, -25, -25, 100, 100); |
| ctx.drawImage(srcCanvas, 0, -100, 100, 200, 75, -25, 100, 100); |
| ctx.drawImage(srcCanvas, 0, -100, 200, 200, 175, -25, 100, 100); |
| ctx.drawImage(srcCanvas, -100, 0, 200, 100, -25, 75, 100, 100); |
| ctx.drawImage(srcCanvas, 0, 0, 200, 100, 175, 75, 100, 100); |
| ctx.drawImage(srcCanvas, -100, 0, 200, 200, -25, 175, 100, 100); |
| ctx.drawImage(srcCanvas, 0, 0, 100, 200, 75, 175, 100, 100); |
| ctx.drawImage(srcCanvas, 0, 0, 200, 200, 175, 175, 100, 100); |
| } |
| |
| </script> |
| </body></html> |
