| OLD | NEW | 
|---|
|  | (Empty) | 
| 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.strokeStyle = color; |  | 
| 32   context.lineWidth = width; |  | 
| 33   context.strokeRect(40, 40, 120, 120); |  | 
| 34 }; |  | 
| 35 |  | 
| 36 drawCanvas('box-1', 'rgb(50, 100, 150)', '5px'); |  | 
| 37 drawCanvas('box-2', 'rgb(150, 100, 50)', '10px'); |  | 
| 38 |  | 
| 39 </script> |  | 
| 40 </body> |  | 
| 41 </html> |  | 
| OLD | NEW | 
|---|