All geek questions in one place

How to add selected text in HTML 5 Canvas?

I need to put a text label on top of the canvas. Is it possible? How can i do this? I know that fillText, but fillText does not give me smooth output text. I also want the text on the label to be copied by users, which is not possible if I use fillText.

+6
source share
3 answers

Assuming you just want to place the text on top of the canvas in the html page:

HTML:

<label>Yahoo, I'm on top of canvas??</label> <canvas width="500" height="500" ></canvas>

CSS

 canvas { border:1px solid gray; } label { position:absolute; top:20px; left:20px; }

Working demo

<h / "> EDIT:

According to the editing, if you are looking for a solution to select the text inside the canvas, it will be a little painful.

I would suggest using CreateJS . This would make your life a lot easier with your canvas.

Although the library does not provide you with accessible text, it is easier to implement.

Here is a DEMO , how you could create selectable text.

 // Text Selector Class function Selector(stage, text) { var select = new createjs.Shape(); function selector(x, y, width, height) { select.graphics.clear().beginFill("#ace") .drawRect(x || 0, y || 0, width || 0, height || 0); } var tuw = text.getMeasuredWidth(); var tuh = text.getMeasuredHeight(); text.addEventListener("mousedown", function (e) { var startX = e.rawX; var onMove = function (e) { if (e.rawX >= text.x && e.rawX <= text.x + tuw) selector(startX, text.y, e.rawX - startX, tuh); }; var onUp = function () { stage.removeEventListener("stagemousemove", onMove); selector(); }; stage.addEventListener("stagemousemove", onMove); stage.addEventListener("stagemouseup", onUp); }); return select; } var stage = new createjs.Stage("shape"); // Text Node var text = new createjs.Text("Hello World"); text.x = 100; text.font = "20px Arial"; text.color = "#ff7700"; text.cursor = "text"; stage.addChild(text); // Attach Selector stage.addChildAt(new Selector(stage, text), 0); // Important stage.enableMouseOver(); setInterval(function () { stage.update(); }, 100);
+2
source

It is possible. Here is an example of using svg with foreignObject directly from the Mozilla Developer Network .

 <!DOCTYPE html> <html> <body> <p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" + "</div>" + "</foreignObject>" + "</svg>"; var DOMURL = self.URL || self.webkitURL || self; var img = new Image(); var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); }; img.src = url; </script> </body> </html>
+1
source

In one of my canvas projects, I needed to create a selected, editable and copied text area generated by a click and deleted when the text area loses focus. Below is the structure of how I did it.

JavaScript:

 var mousePos; var textarea = null; var x; var y; var textValue; function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousedown', function(evt) { mousePos = getMousePos(canvas, evt); mouseDown = true; setTimeout(function() { check(mousePos.x, mousePos.y) }, 50); }, false); canvas.addEventListener('mouseup', function(evt) { evt.preventDefault(); mouseDown = false; }, false); function check(xPos, yPos) { if(xPos > /*lower bounding x position*/ && xPos < /*upper bounding x position*/ && yPos < /*upper bounding y position*/ && yPos > /*lower bounding y position*/) { if(!textarea) { textarea = document.createElement('textarea'); textarea.className = 'textArea'; textarea.onkeypress = function (e) { if (e.which === 13) { // Allows pressing 'Enter' to change the focus of the text area textarea.blur(); } } textarea.onblur = function () { /*do something with value*/ textValue = textarea.value; document.body.removeChild(textarea); textarea = null; } document.body.appendChild(textarea); } textarea.blur(); textarea.value = /*put default value*/; textarea.style.left = /*put left position of object*/; textarea.style.top = /*put top position of object*/; } }

CSS

 .textArea { /* The only necessary CSS is a height, a width, and position:absolute */ position: absolute; background:grey; height:20px; border:0; outline:0; line-height:10px; width:100px; resize: none; overflow:hidden; font-size:10px; }

This allows you to create only one text area and be created by clicking and deleting when it loses focus. Not sure if you want this functionality, but it's easy to remove if not

Demo here (WiP) when you click on the value to the right of one of the bars

+1
source

Source: https://habr.com/ru/post/950519/

More articles:


All Articles