paint-arguments-ref.html (760B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #background { 6 background-color: yellow; 7 display: inline-block; 8 } 9 10 .container { 11 font-size: 0px; 12 } 13 </style> 14 </head> 15 <body> 16 17 <div id="background"> 18 <div class="container"> 19 <canvas id ="box-green" width="100" height="100"></canvas> 20 </div> 21 <div class="container"> 22 <canvas id ="box-red" width="100" height="100"></canvas> 23 </div> 24 </div> 25 26 <script> 27 function drawCanvas(canvasID, color) { 28 var canvas = document.getElementById(canvasID); 29 var context = canvas.getContext("2d", {alpha: true}); 30 context.clearRect(0, 0, canvas.width, canvas.height); 31 context.fillStyle = color; 32 context.fillRect(20, 20, 60, 60); 33 }; 34 35 drawCanvas('box-green', 'green'); 36 drawCanvas('box-red', 'red'); 37 38 </script> 39 </body> 40 </html>