I am working on web app in which i have to display PDF file using PDF.JS and there are few area where i have to draw a rectangle and user can click on that which take him to details page. Till now i am able to display pdf and while looking at pdf js i found canvas.js in which all text is draw on canvas using
showText: function CanvasGraphics_showText(glyphs) {} function now i am keeping track of all text those text where i have to draw a rectangle but i am facing some problem to accomplish it. showText function calls many times which creating multiple rectangles. I have done following changes in function
if(glyphs.length ==10){
// common case
var bValue=false;
glyphs.forEach(function(value, index, ar){
var str =['d', 'e', 't', 'a','i','l','='];
if(str.indexOf(value.fontChar)>=0){
bValue=true;
}
});
if(bValue){
ctx.beginPath();
ctx.rect(scaledX, 50, 200, 100);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.font = '20pt Calibri';
// textAlign aligns text horizontally relative to placement
ctx.textAlign = 'center';
// textBaseline aligns text vertically relative to font
// style
ctx.textBaseline = 'middle';
ctx.fillStyle = 'blue';
ctx.fillText("Click", 120, 100);
}
}
glyphs is array of objects and i am searching for values define in str.
Can any one please point me into right direction ?
Thanks in Advance.
It's not really possible to do this directly. Canvas is, fundamentally, a bitmap-based graphics engine: the only things it remembers from call to call are the values of the pixels inside it. You can draw text, but once you've done that, the canvas doesn't know that it's text anymore. That's why you can't search for it inside the image.
The quickest and easiest way around this is to keep track of the text somewhere else. #ZachSaucier's comment mentions this possibility. I see that you're concerned about performance, but the alternative would be to implement some kind of OCR algorithm to extract the text from the bitmap. There's no standard way to do that, so you'd have to implement OCR yourself, and it would be much slower than storing the text in a variable.
Another option would be to use SVG instead of Canvas. SVG isn't bitmap-based, so when you put text into an SVG image, the engine can remember that it's text, and you could search within that. However, drawing things in SVG is very different from drawing them in Canvas, so unless you're already using a library that can work with either one, you would have to rewrite your drawing code. That might not be feasible for what you're trying to do.
Related
Sorry for my English.
I am developing an automate extension for Cava,Photopea and Kittl.
Our chrome extension will read value from csv file and auto replace text on a design.
Example: I am designing a template for T-SHIRT and I have two text element "Name", "Slogan" on this design.
In the CSV file, I list the values for Name and Slogan. Our app will find and replace text , then save as result as png.
I have implemented my idea successfully for Cana and Photopea, but cannot for Kittl.
The problem is I couldn't see these elements on HTML page when I inspected. Therefore, I cannot use javascript to select these elememts and replace text.
T-Shirt Sample
I thought they are using canvas HTML, but I tried to get a context and fill a text but its failed.
I am wonder how they hide these elements and what is the solution to select a element on design of Kittl.
What you want to do is simply not possible. Kittl uses an HTMLCanvasElement to render its graphics. Canvases do not expose references to document-like structures where you can query elements. At most you can inspect "baked" pixel data, or programmatically draw new stuff on top what already exists.
if you are trying to develop an extension that will automate the process of replacing text in a design using data from a CSV file, and you are having trouble doing so for a website that uses a canvas element to render text, you will need to use the canvas API to manipulate the text. The canvas API provides methods for drawing text and other graphics onto the canvas, and you can use these methods to select and manipulate text elements that are rendered onto the canvas. You can also use the measureText method to measure the width of the text and position it on the canvas as desired.
example how you use the canvas API to draw text onto a canvas element:
let canvas = document.getElementById('my-canvas');
let ctx = canvas.getContext('2d');
ctx.font = '48px sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText('Hello, World!', canvas.width / 2, canvas.height / 2);
I'm new to using canvas and am having a weird issue. My canvas lines are successfully being drawn using:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
where canvas is the id of a canvas. I then draw using the methods:
context.strokeStyle = "red";
context.beingPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.stroke();
with lineTo being called in a loop updating its position. I use these methods in a function and can draw multiple lines. The issue is (is it an issue?) when I use google's inspect elements I can't find these lines under the canvas that was created. I am used to seeing a path element of some sort.
I can see the script that created these lines, however.
EDIT: just checked another website using canvas and this seems to be normal behavior. Would like confirmation though.
Thanks
Yes It's normal behaviour.
In 2012 the chrome have some experimental plugin with help inspect canvas. But I not sure if it still avaiable (I found information here http://www.html5rocks.com/en/tutorials/canvas/inspection/)
I have been trying to print arc in the html page. How can i remove the already drawn arch from the page?. i have written the below code.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1200" height="1000"
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.beginPath();
ctx.arc(600,500,20, 0.5*Math.PI,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(600,500,40, 0.5*Math.PI,2*Math.PI);
ctx.stroke();
*/
var radius=20;
for (i=0; i<10; i++)
{
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI);
ctx.stroke();
radius= radius+30;
}
</script>
</body>
</html>
How can i achieve this?.
Call clearRect method:
ctx.clearRect(0, 0, 1200, 1000)
The four arguments are:
axis-X of left top corner of the area to wipe
axis-Y of left top corner of the area to wipe
width of the area to wipe
height of the area to wipe
So with this method, you could wipe either the whole canvas or just a certain part of it.
If you want to remove the whole previously drawn image please take a look at the other anwers. In the comments OP made it clear that this is not what he was trying to achieve. So instead I will answer the intended question:
How do I un-stroke a path?
A bitmap is not a vector graphic. You cannot simply remove or modify things you've drawn previously. By drawing on a canvas you modify the pixel color values of its image data. If you need to undo things you have to maintain a separate data structure with the relevant data yourself.
For example you could create a copy of the image data before drawing something. Then you could return to this snapshot afterwards. HTMLCanvasElement#toDataURL returns the complete image as an url which you can use as the src of an image. Later you can draw this image on the canvas to revert all subsequent changes. HTMLCanvasElement#toBlob does about the same but it returns a blob. This might consume less memory but it's a little more inconvenient to use. The most convenient method is CanvasRenderingContext2D#getImageData. You can even use it to copy only a small part of the image. This is useful if you have a big canvas but only modify pixels in a small region.
Another way to make modifications undoable is by maintaining a detailed list of your steps. For example whenever you draw an arc you store the exact parameters as one entry in the list. steps.push({type: 'stroke', style: 'rgb(0,0,0)', shapes: [{type: 'arc', x: 600, y: 500, radius: radius, from: 0.5 * Math.PI, to: 2 * Math.PI}]}) You can remove, rearrange or modify the elements in this list any way you like and have all necessary information to draw the resulting image from scratch. Basically you've implemented just another vector graphic library.
I'm learning some game dev with JavaScript, so I wanted to use HTML5 canvas to draw on the screen. The problem is that I can't get it to display text.
You can see my code here (you might be greeted by a prompt asking a name for your chatracter) http://jsfiddle.net/LAmC3/
Essentially i only used:
canX.font = '80pt Helvetica';
canX.fillText(player.getName(),100, 100);
With canX being the context of my canvas which has the same dimensions as the viewport.
If anyone knows why, please let me know.
You're drawing the text in the same colour as the background, set the fillStyle to something new, e.g.
canX.fillStyle = '#FFFFFF';
I am having trouble finding a good method to limit my mouse to be only able to click on a pre existing line in canvas (stroke width of 3)
What I need to know
how to limit mouse so can only click on pre- existing line, add a dot on click
line is drawn with this function
function createLine(startX:Float, startY:Float, endX:Float, endY:Float)
{
surface.beginPath();
surface.moveTo(startX, startY);
surface.lineTo(endX, endY);
surface.closePath();
surface.strokeStyle = '#ffffff';
surface.lineWidth = 2;
surface.stroke();
}
I am working in haxe, but solution in JS is fine
Thanks in advance.
The only way is for you to keep track of what you have drawn and do the collision/mouse over detection on your own.
If you need your canvas to be highly interactive, you should probably be looking at SVG. http://raphaeljs.com/ is a great library for drawing which will use canvas or SVG, whichever is available.