Remove input box from canvas

Question

Remove input box from canvas

Navigation

#1 by (0 votes)

0

I'm trying to make a text tool from a drawing application with an input box, using the CanvasInput bookstore.

I can apply the text I write to the canvas by clicking enter , but I'm not able to remove the input box from there after applying the text.

As I tried with input.destroy(); the input box stops working but it still appears on the canvas and I can not get back to using the text tool.

Does anyone know how to remove the input box from the canvas?

Project

JS

var inputBox=0;
var input;

function text(e) {
  console.log(e.target);
  console.log(e.target.value);

  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);
  input.destroy();
}

function drawText(ctx,x,y,size) {
    if (inputBox==0){
        inputBox=1;
           input = new CanvasInput({
              x: mouseX,
              y: mouseY,
              canvas: document.getElementById('sketch'),
              fontSize: 18,
              fontFamily: 'Arial',
              fontColor: '#212121',
              fontWeight: 'bold',
              width: 200,
              padding: 8,
              borderWidth: 1,
              borderColor: '#000',
              borderRadius: 3,
              boxShadow: '1px 1px 0px #fff',
              innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
              placeHolder: 'Enter message here...',
              onsubmit : text
        });
    }
}

javascript html5 canvas

asked by anonymous 14.06.2017 / 16:22

1 answer

Login that compares user input with encrypted data in MySQL How to send a table via ajax?

score 0 · Answer 1

Hey, the problem is that drawing on canvas through JS only way to remove this element is redraw canvas .

Then you should do something like this:

  //Limpar o canvas, ou seja a inputbox que já lá estava (se não me engano)
  ctx.clearRect(0, 0, canvas.width, canvas.height); 

  //E prosseguir a preencher o canvas 
  ctx.font = '32px serif';
  ctx.fillText(e.target.value, mouseX, mouseY);

Any duet please comment.