| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id ="one" width="100" height="100"></canvas> |
| <canvas id ="two" width="100" height="100"></canvas> |
| <script> |
| function drawCircle(ctx, geom) { |
| ctx.fillStyle = 'green'; |
| ctx.beginPath(); |
| ctx.rect(0, 0, geom.width, geom.height); |
| ctx.fill(); |
| } |
| |
| var ctx1 = document.getElementById('one').getContext('2d'); |
| drawCircle(ctx1, {width: 50, height: 50}); |
| ctx1.translate(50, 0); |
| drawCircle(ctx1, {width: 50, height: 50}); |
| ctx1.resetTransform(); |
| ctx1.translate(0, 50); |
| drawCircle(ctx1, {width: 100, height: 50}); |
| |
| var ctx2 = document.getElementById('two').getContext('2d'); |
| for (var i = 0; i < 5; i++) { |
| drawCircle(ctx2, {width: 50, height: 20}); |
| ctx2.translate(0, 20); |
| } |
| ctx2.resetTransform(); |
| ctx2.translate(50, 25); |
| drawCircle(ctx2, {width: 50, height: 50}); |
| </script> |
| </body> |
| </html> |
