如何将两个图像设置为并排

我使用画布创建了一个仪表，它在web浏览器上完美显示。然而，我计划显示两个并排的仪表；一个指标是反映用户交互的速度，另一个指标则作为计数器的用途。此外，仪表将在启动按钮上的初始用户交互时激活。

问题：

此时，我已成功创建并正确显示了第一个仪表。因此，为了创建2个画布图像，我已经创建了2个<canvas>标签，并且当我为第二<canvas>创建第二个<script>标签时，第二个画布图像被叠加在第一个<canvas>标签上。因此，我将无法看到第一个画布图像。

因此，我想就如何使2个画布图像相互并排寻求帮助？

代码： 我已经删除了创建第二个画布的<script>代码，它一开始可能不正确，因此我删除了它。

HTML

 <canvas id="canvas" width="300" height="300">
 </canvas>
 <canvas id="Counter" width="300" height="300">
 </canvas>

CSS

 #canvas {
           display: block;
           width: 300px;
           margin: 100px auto;
 }
 /*Custom font for numbers*/
 @font-face {
           font-family: "bebas";
 }

JAVASCRIPT

window.onload = function(){
           //canvas initialization
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           //dimensions
           var W = canvas.width;
           var H = canvas.height;
           //Variables
           var degrees = 0;
           var new_degrees = 0;
           var difference = 0;
           var color = "#ffa500"; //green looks better to me
           var bgcolor = "#654321";
           var text;
           var animation_loop, redraw_loop;
           function init()
           {
              //Clear the canvas everytime a chart is drawn
              ctx.clearRect(0, 0, W, H);
              //Background 360 degree arc
              ctx.beginPath();
              ctx.strokeStyle = bgcolor;
              ctx.lineWidth = 30;
              ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now
              ctx.stroke();
              //gauge will be a simple arc
              //Angle in radians = angle in degrees * PI / 180
              var radians = degrees * Math.PI / 180;
              ctx.beginPath();
              ctx.strokeStyle = color;
              ctx.lineWidth = 30;
              //The arc starts from the rightmost end. If we deduct 90 degrees from the angles
              //the arc will start from the topmost end
              ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
              //you can see the arc now
              ctx.stroke();
              //Lets add the text
              ctx.fillStyle = color;
              ctx.font = "50px bebas";
              text = Math.floor(degrees/360*100) + "ms";
              //Lets center the text deducting half of text width from position x
              text_width = ctx.measureText(text).width;
              //adding manual value to position y since the height of the text cannot be measured easily. There are hacks but we will keep it manual for now.
              ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
               }
           function draw()
           {
              //Cancel any movement animation if a new chart is requested
              if(typeof animation_loop != undefined) clearInterval(animation_loop);
              //random degree from 0 to 360
              new_degrees = Math.round(Math.random()*360);
              difference = new_degrees - degrees;
              animation_loop = setInterval(animate_to, 1000/difference);
           }
           //function to make the chart move to new degrees
           function animate_to()
           {
              //clear animation loop if degrees reaches to new_degrees
              if(degrees == new_degrees) 
              clearInterval(animation_loop);
              if(degrees < new_degrees)degrees++;
              else
                  degrees--;
              init();
           }
           //Lets add some animation for fun
           draw();
            //Draw a new chart every 2 seconds
           redraw_loop = setInterval(draw, 2000); 
        }