paint-function-arguments-ref.html (799B)
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-1" width="200" height="200"></canvas> 20 </div> 21 <div class="container"> 22 <canvas id ="box-2" width="200" height="200"></canvas> 23 </div> 24 </div> 25 26 <script> 27 function drawCanvas(canvasID, color, width) { 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(40, 40, width, width); 33 }; 34 35 drawCanvas('box-1', 'rgb(50, 100, 150)', '50'); 36 drawCanvas('box-2', 'rgb(150, 100, 50)', '100'); 37 </script> 38 </body> 39 </html>