Botones

[rubensm9]

Hola, Estoy empezando en javascript y mi idea es poner 3 botones (Triangulo, rectangulo y circulo) que pulsando en ellos salga su correspondiente figura con canvas.

Usando una funcion por figura se posicionan una debajo de la otra cuando deberian estar aproximadamente en la misma posición

Haber si me podeis ayudar como seria poniendo todo en una misma funcion

Dejo el codigo del canvas por si se necesita

Javascript

Código PHP:

      var canvas = document.getElementById("canvasId"); 
    context = canvas.getContext("2d"); 
 
//Triangulo 
        context.fillStyle = "rgb(0,0,255)"; 
        context.beginPath(); 
        context.moveTo(200,200); 
        context.lineTo(300,350); 
        context.lineTo(100,350); 
        context.lineTo(200,200); 
           context.fill(); 
         
 
// Rectangulo 
        context.fillStyle = "rgb(0,0,255)"; 
        context.fillRect(50, 0, 200, 100); 
         
 
//circulo 
        context.clearRect(0,0,400,1200); 
        context.fillStyle = "rgb(0,0,255)"; 
        context.beginPath(); 
        context.arc(200,100,100,0,Math.PI*2,true); 
        context.closePath(); 
        context.fill();  
   

La llamada del canvas en HTML seria

Código PHP:

  <canvas id="canvasId" width="1200" height="400"></canvas>