1

Here is my code so far:

MouseDown(){
//if first mousedown
     X1 = tempX; //tempX is for current positon
     Y1 = tempY;
     if (Input.style.display === "none") {
        Input.value = "";
        Input.style.top = tempX + 'px';
        Input.style.left = tempY + 'px';
        Input.size = 1;
        Input.style.display = "block";
        Draw();
        }
}

Draw(){
    var userInput = Input.value;
    rectangledText(X1, Y1, 150, userInput, 12, 'verdana'); //code by markE
}

 function rectangledText(x, y, width, text, fontsize, fontface) { //code by markE
        self.TextWidth = ctx.measureText(Text).width;
        var height = wrapText(x, y, text, fontsize, fontface, width)

        ctx.strokeRect(x, y, width, height);

    }


    function wrapText(x, y, text, fontsize, fontface, maxwidth) {
        var startingY = y;
        var words = text.split(' ');
        var line = '';
        var space = '';
        var lineHeight = fontsize * 1.286;
        ctx.font = fontsize + "px " + fontface;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'top'
        for (var n = 0; n < words.length; n++) {
            var testLine = line + space + words[n];
            space = ' ';
            if (ctx.measureText(testLine).width > maxwidth) {
                ctx.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
                space = '';
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
        return (y + lineHeight - startingY);
    }

This code will output the image below: enter image description here

Basically what I want is to have the dynamic box and Wrapped text when I start to type the input or the mouseup after the first mousedown. Hopefully someone can help me with my problem.

Here is my other question, with regards to this post also.

Community
  • 1
  • 1
Believer
  • 182
  • 1
  • 13
  • Could you add a little bit more explanation please? Did you go with markE's advice of placing an HTMLInput over your canvas element? Could you show us a working snippet (http://jsfiddle.net/ can help) – Kaiido Nov 19 '15 at 09:13
  • To get the user Input I followed this link http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input , then after that I draw the dynamic Box and Wrapped Text. What I want is to implement the dynamic Box and Wrapped Text function even when I'm getting first the user Input as show in the image above. – Believer Nov 19 '15 at 09:18
  • @Kaiido any idea on how to implement it? – Believer Nov 19 '15 at 09:58
  • Do a check inside the key event and resize your canvas when there is no more vertical room, then redraw the whole. But without your complete snippet, it is hard to help too much. – Kaiido Nov 19 '15 at 10:00
  • the problem is that the input text is just continuous and I dont know how to detect if there is no more vertical room – Believer Nov 19 '15 at 10:04
  • So if I understand clearly, you are directly using goldfire's CanvasInput plugin right? What do you do with the code in the question then? Please add a [live snippet](http://jsfiddle.net) of what you have right now so we can help. (I could give [a code](http://jsfiddle.net/ffnj0bg0/) that does almost what you want, but this is not the way you gone so this won't help too much...) – Kaiido Nov 19 '15 at 10:38
  • I'm willing to change my implementation if your code is much easier to work with. – Believer Nov 19 '15 at 10:52
  • Wow your code so far fits perfectly with my need. But Is it fine with you to describe/explain the process of getting the user input – Believer Nov 19 '15 at 11:00
  • I just hide an input, then, if the click on the canvas occurs inside the `canInput`, it set the focus on the hidden input (`input.focus()`). Then it just listens to input's keydown event. But it needs a lot of cleaning and I'm not sure I've got time for this rn. – Kaiido Nov 19 '15 at 11:04
  • Ok I'll try to work on this. It has an error that I will try to fix, specifically when the user type a word then space and also clicking then typing. It repeats the last character – Believer Nov 19 '15 at 11:09

0 Answers0