Javascript 提交后将在画布上显示水印

我有一个HTML画布，你为圆圈选择一种颜色和大小，一旦点击，圆圈就会出现。现在我想要一个带有文字“Hello”的水印，在你画圆圈之前被看到，然后在你开始画的时候消失，画布恢复为白色。 我还有一个submit按钮，可以删除所有圆圈，我希望在单击按钮时显示水印。 很抱歉我的英语不好，但我希望你能理解我的问题

请看这个

Javascript

function initiateCanvasCircle() {
var context = document.getElementById('myCanvas').getContext('2d'),
    input = document.getElementById( 'myColor' ),
    size = document.getElementById( 'mySize' ),
    watermark = document.getElementById( 'myWatermark' );
context.canvas.addEventListener('mousemove', function(event) {
    var mouseX = event.clientX - context.canvas.offsetLeft;
    var mouseY = event.clientY - context.canvas.offsetTop;

});

context.canvas.addEventListener('click', function(event) {
    var mouseX = event.clientX - context.canvas.offsetLeft;
    var mouseY = event.clientY - context.canvas.offsetTop;

    context.beginPath();
    context.arc(mouseX, mouseY, size.value / 2, 0, 2 * Math.PI, false);


    context.fillStyle = input.value ? '#' + input.value : '#333';

    context.fill();
});

}

function circle() {
    window.addEventListener('click', function(event) {
        initiateCanvasCircle();
    });
}

function drawCircle() {
    circle();
}

initiateCanvasCircle();



// Button   
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

  document.getElementById('clear').addEventListener('click', function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }, false);
  myCanvas.addEventListener('click', function() { }, false);

---

我真的希望你能帮助我理解如何按照我想要的方式制作水印

我对您的

添加了以下两个功能以添加文本和清除画布：

function drawText() {
     var x = canvas.width / 2;
     var y = canvas.height / 2;

      context.font = '30pt Calibri';
      context.textAlign = 'center';
      context.fillStyle = 'blue';
      context.fillText('Hello World!', x, y);   
}

function clearCanvas(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawnOnCanvas = false;
}

---

对onClick进行了一些其他更改，添加了变量drawnOnCanvas以跟踪文本何时需要显示等。

太好了！谢谢你的回答！如果我希望画布是白色而不是现在的灰色背景，那么我必须做什么呢？在de

clearCanvas（）

函数中，在

clearRect（）之后添加：
context.fillStyle=“白色”；context.fill（）不起作用：（函数clearCanvas（）{context.clearRect（0，0，canvas.width，canvas.height）；context.fillStyle=“white”；context.fill（）；drawnOnCanvas=false；}但在开始时它仍然不是白色（绿色）…当您单击并清除时，只需添加
clearCanvas（）；
下面的“//Button”和上面的
drawText（）；