캔버스에 텍스트를 추가하는 방법

Question

캔버스 채우기 기능에 문제가 있습니다. 나는이 코드를 가지고있다 :

 scene.shapes['shop1'] = new Shape(); 
     var ps1 = scene.shapes['shop1'].points; // for convenience 

     ps1[0] = new Point(1024, 66, 10); // left bottom 
     ps1[1] = new Point(694, 66, 10); // right bottom 
     ps1[2] = new Point(694, 466, 10); // right top 
     ps1[3] = new Point(1024, 466, 10); // left top  


     // Background 
     scene.shapes['shop1'].polygons.push(new Polygon(
      [ps1[0], ps1[1], ps1[2], ps1[3] ], 
      new Point(0, 0, 1), 
      true /* double-sided */, 
      Polygon.SOLID, 
      [177, 216, 249] 
     )); 

        scene.shapes['shop1Header'] = new Shape(); 
     var ps1h = scene.shapes['shop1Header'].points; // for convenience 

     ps1h[0] = new Point(1024, 400, 11); // left bottom 
     ps1h[1] = new Point(694, 400, 11); // right bottom 
     ps1h[2] = new Point(694, 466, 11); // right top 
     ps1h[3] = new Point(1024, 466, 11); // left top  


     // Background 
     scene.shapes['shop1Header'].polygons.push(new Polygon(
      [ps1h[0], ps1h[1], ps1h[2], ps1h[3] ], 
      new Point(0, 0, 1), 
      true /* double-sided */, 
      Polygon.SOLID, 
      [175, 175, 175] 
     ));  

          var x = -1024; 
          var y = -500; 

          ctx.font = '60pt Calibri'; 
          ctx.lineWidth = 3; 
          // fill color 
          ctx.fillStyle = 'blue'; 
          ctx.fillText('Hello World!', x, y); 

그러나 그것은 텍스트를 만들지 않고 단지 상점을 보여준다. 이 문제를 해결하는 방법을 알고 있습니까? 고맙습니다.

Answer 1

x 및 y의 값이 음수이므로 캔버스 외부로 그려집니다. x를 0으로 설정하고 y를 0 + font-size로 설정하면 텍스트가 왼쪽 상단 모서리에 그려집니다.

편집 : 글꼴 크기를 y에 추가해야합니다.

ctx.font = "60px Calibri"; // Use pixels instead of points 
ctx.fillText("Hello World", 0, 60);