<!DOCTYPE html> <html> <head> <style> #background { background-color: yellow; display: inline-block; } .container { font-size: 0px; } </style> </head> <body> <div id="background"> <div class="container"> <canvas id ="box-green" width="100" height="100"></canvas> </div> <div class="container"> <canvas id ="box-red" width="100" height="100"></canvas> </div> </div> <script> function drawCanvas(canvasID, color) { var canvas = document.getElementById(canvasID); var context = canvas.getContext("2d", {alpha: true}); context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = color; context.fillRect(20, 20, 60, 60); }; drawCanvas('box-green', 'green'); drawCanvas('box-red', 'red'); </script> </body> </html>