CODEWITHSUNDEEP
javascriptjqueryhtml
Developer_world
Developer_world

Reputation: 155

Update canvas text after page load

I have a canvas elements in my webpage that is containing some text which I want to edit with text box.For example a text in canvas is "This is a apple" but later I want to change that text like this "Apple is never liked by me" This thing should be done via text box key up event with javascript or jQuery. Please give me some suggestions.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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

ctx.font = "20px Georgia";
ctx.fillText("This is a apple", 10, 50);

ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

</script>
    <input id="sourceText1" type=text>
</body>
</html>

I want to change the text with textbox.

Upvotes: 0

Views: 542

Answers (1)

enhzflep
enhzflep

Reputation: 13089

Here's some code that will work with your current example. It is however, terribly flawed - I'd like to make that very clear.

0) I've had to add 4 pixels in order to get the erasing rect to cover the text properly. I'm not sure why this is needed, or how to query/calculate this - I used an image editor. If the size of your text was different, I'd imagine you would need to use a different 'magic-number' than 4.

1) The example will break-down if the background is not white, most particularly if you have a pattern, rather than a solid colour.

2) The whole text is erased and redrawn for each keystroke - we should ideally speaking, only be clearing it if necessary. I.e - if the text gets longer and the new text is the same up until the new character, there's nothing to erase.

3) I'm too tired to further examine my code for flaws.

4) You can almost certainly (actually I'm about 99.9999999% sure) find code that does this kind of task already - code which is far more robust and, is production-ready.

Consider this code nothing more than "a hack that works". If I could post it merely as a comment, I would.

Perhaps a better option would be to simply draw the text again, using white as the colour - though I've a feeling that this wont quite work, due to anti-aliasing, which will leave a faint outline - failing to properly cover the existing text.

If the code is unsuitable for you, simply bring it back along with your receipt for a full refund. :laughs:

That said, here you go:

<!DOCTYPE html>
<html>
<head>
<script>
function byId(id){return document.getElementById(id);}

window.addEventListener('load', onDocLoaded, false);

var textPosX = 10, textPosY = 50;
var defaultText = "This is a apple";
var curText = defaultText;
var defaultFont = "20px Georgia";

function onDocLoaded(evt)
{
    // add event listener to the input element, this will fire any time (text) input is received
    byId('sourceText1').addEventListener('input', onSourceTextInput, false);

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

    ctx.font = defaultFont;
    ctx.fillText(defaultText, textPosX, textPosY);

    ctx.font = "30px Verdana";
    // Create gradient
    var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");
    // Fill with gradient
    ctx.fillStyle = gradient;
    ctx.fillText("Big smile!", 10, 90);
}

function onSourceTextInput(evt)
{
    var can = byId('myCanvas');
    var ctx = can.getContext('2d');
    var curTextWidth, curTextHeight;

    curTextWidth = ctx.measureText(curText).width;
    curTextHeight = 20;

    var curStyle = ctx.fillStyle;
    ctx.fillStyle = "white";
    ctx.fillRect(textPosX, (textPosY-curTextHeight)+4, curTextWidth, curTextHeight);
    ctx.fillStyle = 'BLACK';
    ctx.font = defaultFont;
    ctx.fillText( this.value, textPosX, textPosY );
    ctx.fillStyle = curStyle;

    curText = this.value;
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<input id="sourceText1" type='text'/>
</body>
</html>

Upvotes: 1

Related Questions