background-image-tiled-ref.html (834B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id ="one" width="100" height="100"></canvas> 5 <canvas id ="two" width="100" height="100"></canvas> 6 <script> 7 function drawCircle(ctx, geom) { 8 ctx.fillStyle = 'green'; 9 ctx.beginPath(); 10 ctx.rect(0, 0, geom.width, geom.height); 11 ctx.fill(); 12 } 13 14 var ctx1 = document.getElementById('one').getContext('2d'); 15 drawCircle(ctx1, {width: 50, height: 50}); 16 ctx1.translate(50, 0); 17 drawCircle(ctx1, {width: 50, height: 50}); 18 ctx1.resetTransform(); 19 ctx1.translate(0, 50); 20 drawCircle(ctx1, {width: 100, height: 50}); 21 22 var ctx2 = document.getElementById('two').getContext('2d'); 23 for (var i = 0; i < 5; i++) { 24 drawCircle(ctx2, {width: 50, height: 20}); 25 ctx2.translate(0, 20); 26 } 27 ctx2.resetTransform(); 28 ctx2.translate(50, 25); 29 drawCircle(ctx2, {width: 50, height: 50}); 30 </script> 31 </body> 32 </html>