HTML5 Обновление Canvas повторяется и снова масштабируется

Question

Я просто пытаюсь работать с холстом в html5 в первый раз, и я столкнулся с проблемой, которую, я надеюсь, легко решить, но я не могу найти ответ.

В основномКогда документ загружается, я могу нарисовать фигуру на холсте, затем хочу добавить к ней текст и обновить холст.Холст начинается в масштабе 0,5, но когда я пытаюсь добавить текст и перерисовать холст, он рисует поверх существующего холста в масштабе 0,25.

Поэтому я считаю, что холст перерисовывается поверхисходного холста и масштабирования в стеке?

Ниже приведена упрощенная версия того, что я делаю:

$(document).ready(function() {
    playerID = "";
    createCanvas();
}


function createCanvas(){

    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    context.scale(0.5, 0.5);

  //code to draw the shape


    var x = 28;
    var y = 45;
    context.font = "20pt Calibri";
context.fillStyle = "#ffffff";
context.fillText(''+playerID+'', x, y);

  };


function playerNumber(){
 playerID = 5;
 createCanvas();
 }

Есть ли какой-нибудь метод очистки холста перед его повторным рисованиемчто остановит эту проблему, или я могу обновить / обновить холст?

Я не совсем уверен в правильном способе продолжения, любая помощь будет отличной.Спасибо.

Answer 1

Проблема возникает потому, что вы помещаете весь свой код в одну функцию.Большой номер - нет.
Разделите его на две части следующим образом:

1. Создание:

   $(document).ready(function() {            
       var canvas = document.getElementById("player1");
       var context = canvas.getContext("2d");
   
       context.scale(0.5, 0.5);
   }
   

2. Добавление текста:

   function playerNumber(){      
       var playerID = 5;  
   
       var canvas = document.getElementById("player1");
       var context = canvas.getContext("2d");
   
       var x = 28;
       var y = 45;
   
   
       context.font = "20pt Calibri";
       context.fillStyle = "#ffffff";
       context.fillText(''+playerID+'', x, y);
   
   }