How to place moveable and resizable text on over canvas

Question

1.00/5 (1 vote)

See more:

Below i have pasted working code. The code fetches a pdf and re sizes the canvas to that size.
Now i want to place text on the same canvas which can be moved and re sized. Code for placing text and re sizing is here : http://jsfiddle.net/palani/Cxgkz/ Can any one merge both the code and help me out.

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src=https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js>
</script>
</head>
<body>
<canvas id="canvas" style="border:1px solid black">
</canvas>

<script>
  var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var scale = 1.5;
var canvasWidth = 0;
var canvasHeight = 0;
var pageStarts = new Array();
pageStarts[0] = 0;
var url = 'pdf/PRO1000093000.pdf';
alert(pageStarts);
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
    pdf = _pdf;
    //Render all the pages on a single canvas
    alert(pdf.numPages);
    for (var i = 1; i <= pdf.numPages; i++) {
        pdf.getPage(i).then(function getPage(page) {
            var viewport = page.getViewport(scale);
            canvas.width = viewport.width;    // changing canvas.width and/or     canvas.height auto-clears the canvas
            canvas.height = viewport.height;
            page.render({ canvasContext: context, viewport: viewport });
            pages[i - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
            if (canvas.width > canvasWidth) {  // calculate the width of the final display canvas
                canvasWidth = canvas.width;
            }
            canvasHeight += canvas.height;   // calculate the accumulated with of the final display canvas
            pageStarts[i] = pageStarts[i - 1] + canvas.height;    // save the "Y" starting position of this pages[i]
        });
    }
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;  // this auto-clears all canvas contents
    alert(pages.length);
    for (var i = 0; i < pages.length; i++) {
        context.putImageData(pages[i], 0, pageStarts[i]);
    }
});
</script>


</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>

Posted 6-Jul-14 19:15pm

Member 10212996

Updated 6-Jul-14 19:28pm

Mohibur Rashid

v2

Add a Solution

Comments

Mohibur Rashid 7-Jul-14 1:28am

The answer is no.

Member 10212996 7-Jul-14 1:33am

i mean dont know ans?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)