Javascript CreateJS Tutorial to Download PNG Image of Selectable & Copyable Text inside Canvas in Browser

index.html

<canvas id='canvasText' width="1200" height="100"></canvas>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

function Selector(stage, text, textInput, textBox) {
    var select = new createjs.Shape();
    var textWidth = text.getMeasuredWidth();
    var textHeight = text.getMeasuredHeight();
    var initialPosition;
    var lastPosition;
    var disableSelection;

    function selectorByPosition(initialPosition, lastPosition) {
        var selectedTextWidth = getTextWidth(text.text.substring(initialPosition,lastPosition));
        var initialX = getXByPosition(initialPosition);
        var lastX = getXByPosition(lastPosition + 1);
        select.graphics.clear().beginFill("#ace").drawRect(initialX || 0, text.y || 0, lastX - initialX || 0, textHeight || 0);
    }

    function selector(x, y, width, height) {
        select.graphics.clear().beginFill("#ace").drawRect(x || 0, y || 0, width || 0, height || 0);
    }

    //Gets the width of the text
    function getTextWidth(t) {
      var tempText = new createjs.Text(t);
      tempText.font = text.font;
      return tempText.getMeasuredWidth();
    }

    function getPointInText(rawX) {
      var position = 0;
      var totalW = 0;

      for(var i=0; i < text.text.length; i++) {
        totalW += getTextWidth(text.text[i]);
        if (totalW >= rawX) {
          position = i;
          break;
        }
      }
      return position;
    }

    function getXByPosition(position) {
      var totalW = 0;
      for(var i = 0; i < position; i++) {
        totalW += getTextWidth(text.text[i]);
      }
      return totalW;
    }

    window.addEventListener('click', function() {
      console.log("CLICK!!!");
      if(!textInput.hasFocus) {
        console.log("NO FOCUS");
      }

    }, false);

    text.addEventListener("mousedown", function (e) {
        var startX = e.rawX;
        var onMove = function (e) {
          if (e.rawX >= text.x && e.rawX <= text.x + textWidth) {
            initialPosition = getPointInText(startX);
            lastPosition = getPointInText(e.rawX);
            if(initialPosition > lastPosition) {
              var temp = initialPosition;
              initialPosition = lastPosition;
              lastPosition = temp;
            }
            selectorByPosition(initialPosition, lastPosition);
          }
        };
        var onUp = function () {
            stage.removeEventListener("stagemousemove", onMove);
            selectorByPosition(initialPosition, lastPosition);
            textInput.value = text.text.substring(initialPosition, lastPosition+1);
            textInput.focus();
            textInput.select();
        };

        stage.addEventListener("stagemousemove", onMove);
        stage.addEventListener("stagemouseup", onUp);
    });

    return select;
}

//////////////////////////////////Display Text//////////////////////////////////
var stage = new createjs.Stage("canvasText");
stage.enableMouseOver();
setInterval(function () {
    stage.update();
}, 100);

//Create text
var textValue = "Hello Javascript!";
var text = new createjs.Text(textValue);
text.x = 0;
text.y = 0;
text.font = "72px Arial";
text.color = "Gray";
text.cursor = "text";

//Create the hidden input
textInput = document.createElement('input');
textInput.type = 'text';
textInput.style.position = 'absolute';
textInput.style.opacity = 0;
textInput.style.pointerEvents = 'none';
textInput.style.left = (text.x + stage.x + (self._canvas ? self._canvas.offsetLeft : 0)) + 'px';
textInput.style.top = (text.y + stage.y + (self._canvas ? self._canvas.offsetTop : 0)) + 'px';
textInput.style.width = self._width + 'px';
textInput.style.height = self._height + 'px';
textInput.style.zIndex = 0;
if (self._maxlength) {
  textInput.maxLength = self._maxlength;
}
document.body.appendChild(textInput);
textInput.value = textValue;

//Add text
stage.addChild(text);
stage.addChildAt(new Selector(stage, text, textInput), 0);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

function Selector(stage, text, textInput, textBox) {

var select = new createjs.Shape();

var textWidth = text.getMeasuredWidth();

var textHeight = text.getMeasuredHeight();

var initialPosition;

var lastPosition;

var disableSelection;

function selectorByPosition(initialPosition, lastPosition) {

var selectedTextWidth = getTextWidth(text.text.substring(initialPosition,lastPosition));

var initialX = getXByPosition(initialPosition);

var lastX = getXByPosition(lastPosition + 1);

select.graphics.clear().beginFill("#ace").drawRect(initialX || 0, text.y || 0, lastX - initialX || 0, textHeight || 0);

}

function selector(x, y, width, height) {

select.graphics.clear().beginFill("#ace").drawRect(x || 0, y || 0, width || 0, height || 0);

}

//Gets the width of the text

function getTextWidth(t) {

var tempText = new createjs.Text(t);

tempText.font = text.font;

return tempText.getMeasuredWidth();

}

function getPointInText(rawX) {

var position = 0;

var totalW = 0;

for(var i=0; i < text.text.length; i++) {

totalW += getTextWidth(text.text[i]);

if (totalW >= rawX) {

position = i;

break;

}

return position;

}

function getXByPosition(position) {

var totalW = 0;

for(var i = 0; i < position; i++) {

totalW += getTextWidth(text.text[i]);

}

return totalW;

}

window.addEventListener('click', function() {

console.log("CLICK!!!");

if(!textInput.hasFocus) {

console.log("NO FOCUS");

}

}, false);

text.addEventListener("mousedown", function (e) {

var startX = e.rawX;

var onMove = function (e) {

if (e.rawX >= text.x && e.rawX <= text.x + textWidth) {

initialPosition = getPointInText(startX);

lastPosition = getPointInText(e.rawX);

if(initialPosition > lastPosition) {

var temp = initialPosition;

initialPosition = lastPosition;

lastPosition = temp;

}

selectorByPosition(initialPosition, lastPosition);

}

};

var onUp = function () {

stage.removeEventListener("stagemousemove", onMove);

selectorByPosition(initialPosition, lastPosition);

textInput.value = text.text.substring(initialPosition, lastPosition+1);

textInput.focus();

textInput.select();

};

stage.addEventListener("stagemousemove", onMove);

stage.addEventListener("stagemouseup", onUp);

});

return select;

}

//////////////////////////////////Display Text//////////////////////////////////

var stage = new createjs.Stage("canvasText");

stage.enableMouseOver();

setInterval(function () {

stage.update();

}, 100);

//Create text

var textValue = "Hello Javascript!";

var text = new createjs.Text(textValue);

text.x = 0;

text.y = 0;

text.font = "72px Arial";

text.color = "Gray";

text.cursor = "text";

//Create the hidden input

textInput = document.createElement('input');

textInput.type = 'text';

textInput.style.position = 'absolute';

textInput.style.opacity = 0;

textInput.style.pointerEvents = 'none';

textInput.style.left = (text.x + stage.x + (self._canvas ? self._canvas.offsetLeft : 0)) + 'px';

textInput.style.top = (text.y + stage.y + (self._canvas ? self._canvas.offsetTop : 0)) + 'px';

textInput.style.width = self._width + 'px';

textInput.style.height = self._height + 'px';

textInput.style.zIndex = 0;

if (self._maxlength) {

textInput.maxLength = self._maxlength;

}

document.body.appendChild(textInput);

textInput.value = textValue;

//Add text

stage.addChild(text);

stage.addChildAt(new Selector(stage, text, textInput), 0);

Related posts:

You Might Also Like

Build a Guess the Number Game in Browser Using Vanilla Javascript Full Project For Beginners

Javascript Project to Build How Much Water Should I Drink Per Day Calculator in Browser Using HTML5 & CSS3

Build a Bulk HEX to RGBA Color Converter in Browser Using Vanilla Javascript Full Project For Beginners

Leave a Reply Cancel reply