javascript - Watermark to appear on canvas after submit -

i have html canvas, choose color , size circle , when onclick, circle appears. want watermark text "hello" seen before paint circles , disappear when start drawing , canvas goes being white. has submit button that removes circles, , want watermark appear when button clicked. i'm sorry bad english, hope you'll understand question.

please see jsfiddle.

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); 

i hope can me understand how make watermark act way want to.

i made little changes fiddle

added these 2 functions add text , clear canvas:

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; } 

and other changes onclick, added variable drawnoncanvas keep track when text needs appear etc.