HTML canvas change text according to input text

Question

I want to change the text that is on a canvas. The problem that it is just adding and not removing letters as I delete them from the input.

http://jsfiddle.net/pgo8yzrc/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.change = function(val){
   ctx.restore();
   ctx.font = "20px Georgia";
   ctx.fillText(val, 10, 50);
   ctx.save();
}

<canvas id="myCanvas"></canvas>
<input type="text" onkeyup="change(this.value)" />

Why adding text working and removing is not working. can you please correct that?

Thanks

The answer below will solve your issue. Also note that in the fiddle the `onkeyup` event is changed to `oninput`. This means you that whenever your textbox changes so will your canvas — Nick Parsons, Dec 12 '18 at 10:51
I would highly suggest to use the Angular framework. One of it's powerful features is 2-way binding. And that's exactly what you need. 2-way binding will solve your problem but you'll have to use the Angular framework. I'll provide you with a link with the basics: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html — C4mps, Dec 12 '18 at 10:54

Margulan Zharkenov · Accepted Answer · 2018-12-12T11:17:39.890

3

Try this:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.change = function(val){
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.restore();
    ctx.font = "20px Georgia";
    ctx.fillText(val, 10, 50);
    ctx.save();
}

See working example here

Upd.: If you have background add function:

function fillBackground() {

  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, c.width, c.height);

}

Then use it before window.change and after ctx.clearRect

edited Dec 12 '18 at 11:17

answered Dec 12 '18 at 10:43

Margulan Zharkenov

440
2
8

Thank you. but I have a background to the canvas, and the clearRect is taking over and hides it. – SexyMF Dec 12 '18 at 11:08
@Shazam in that case you can fill your background after clearRect. – Margulan Zharkenov Dec 12 '18 at 11:11
Thanks. so is this means that every letter change I need to set the image again? is this noramal? – SexyMF Dec 12 '18 at 11:18
@Shazam You can use two canvas if you don't want to refill background. It will be like layers. The first canvas will be for background and the second for text. – Margulan Zharkenov Dec 12 '18 at 11:44

Ankit Tajpara · Answer 2 · 2018-12-12T11:42:46.460

1

  **Please try this :**

  window.change = function(val){
    ctx.clearRect(0, 0, a.width, a.height);
    ctx.restore();
    ctx.font = "20px Georgia";
    ctx.fillText(val, 10, 50);
    ctx.save();
  }

  **The clearRect() method sets the pixels in a rectangular area to transparent black 
  (rgba(0,0,0,0)). The rectangle's corner is at (x, y), and its size is specified by 
  width and height.**
  x
  The x-axis coordinate of the rectangle's starting point.
  y
  The y-axis coordinate of the rectangle's starting point.
  width
  The rectangle's width. Positive values are to the right, and negative to the left.
  height
  The rectangle's height. Positive values are down, and negative are up.

edited Dec 12 '18 at 11:42

answered Dec 12 '18 at 10:55

Ankit Tajpara

76
7

Thank you for copy my answer. – Margulan Zharkenov Dec 12 '18 at 11:01
you are not only a developer number of developer are available. so you can't say this one is copy code understand. go this link and check this one is old issue https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Ankit Tajpara Dec 12 '18 at 11:06
I answered to the question first and you 11 minutes later just copied my code to your answer. That's it. – Margulan Zharkenov Dec 12 '18 at 11:08
@MargulanZharkenov exaxt copy paste, even the variables values (-: – SexyMF Dec 12 '18 at 11:30
So that What, this is not any one of copyright variable, I think @MargulanZharkenov you have copied this code from an old post https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Ankit Tajpara Dec 12 '18 at 11:44

HTML canvas change text according to input text

2 Answers2