TypeError: myCanvas.getContext is not a function - .PDF implementation2019 Community Moderator ElectionIs there an “exists” function for jQuery?Recommended way to embed PDF in HTML?Proper MIME media type for PDF filesvar functionName = function() vs function functionName() Convert HTML + CSS to PDF with PHP?Set a default parameter value for a JavaScript functionCapture HTML Canvas as gif/jpg/png/pdf?Merge / convert multiple PDF files into one PDFIs there a standard function to check for null, undefined, or blank variables in JavaScript?How to Render PDF file with PDFJS, Gulp and Webpack
Writing in a Christian voice
Is there any common country to visit for uk and schengen visa?
If I cast the Enlarge/Reduce spell on an arrow, what weapon could it count as?
Print last inputted byte
Did Nintendo change its mind about 68000 SNES?
Why I don't get the wanted width of tcbox?
Why doesn't the fusion process of the sun speed up?
Hot air balloons as primitive bombers
What (if any) is the reason to buy in small local stores?
DisplayForm problem with pi in FractionBox
"Marked down as someone wanting to sell shares." What does that mean?
Do I need an EFI partition for each 18.04 ubuntu I have on my HD?
Why do I have a large white artefact on the rendered image?
Would mining huge amounts of resources on the Moon change its orbit?
Do I need to convey a moral for each of my blog post?
Is xar preinstalled on macOS?
Exposing a company lying about themselves in a tightly knit industry: Is my career at risk on the long run?
Recursively updating the MLE as new observations stream in
Jem'Hadar, something strange about their life expectancy
Why are there no stars visible in cislunar space?
How do researchers send unsolicited emails asking for feedback on their works?
Would this string work as string?
Does fire aspect on a sword, destroy mob drops?
Exit shell with shortcut (not typing exit) that closes session properly
TypeError: myCanvas.getContext is not a function - .PDF implementation
2019 Community Moderator ElectionIs there an “exists” function for jQuery?Recommended way to embed PDF in HTML?Proper MIME media type for PDF filesvar functionName = function() vs function functionName() Convert HTML + CSS to PDF with PHP?Set a default parameter value for a JavaScript functionCapture HTML Canvas as gif/jpg/png/pdf?Merge / convert multiple PDF files into one PDFIs there a standard function to check for null, undefined, or blank variables in JavaScript?How to Render PDF file with PDFJS, Gulp and Webpack
I am trying to implement a .PDF file to my website with mozilla pdfjs-dist.
This is my Script:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
</head>
<body>
<canvas id="addjob_pdf_preview"></canvas>
</body>
</html>
<script>
pdfjsLib.getDocument("PDFFILELINK").then(doc =>
doc.getPage(1).then(page =>
var myCanvas = document.getElementById("addjob_pdf_preview");
var context = myCanvas.getContext("2d");
var viewport = page.getViewport(1);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render(
canvasContext: context,
viewport: viewport
);
);
);
</script>
It throws this error:
TypeError: myCanvas.getContext is not a function
I build the implementation exactly after this tutorial: PDF.js Tutorial
I found a few threads about this topic, but im not able to understand what is wrong.
Some referred to the canvas API explanation: Canvas API
Which lead up to more questions than answers.
Regards
javascript pdf canvas
asked Mar 7 at 19:04
PeterlinePeterline
84
add a comment |
I am trying to implement a .PDF file to my website with mozilla pdfjs-dist.
This is my Script:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
</head>
<body>
<canvas id="addjob_pdf_preview"></canvas>
</body>
</html>
<script>
pdfjsLib.getDocument("PDFFILELINK").then(doc =>
doc.getPage(1).then(page =>
var myCanvas = document.getElementById("addjob_pdf_preview");
var context = myCanvas.getContext("2d");
var viewport = page.getViewport(1);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render(
canvasContext: context,
viewport: viewport
);
);
);
</script>
It throws this error:
TypeError: myCanvas.getContext is not a function
I build the implementation exactly after this tutorial: PDF.js Tutorial
I found a few threads about this topic, but im not able to understand what is wrong.
Some referred to the canvas API explanation: Canvas API
Which lead up to more questions than answers.
Regards
javascript pdf canvas
asked Mar 7 at 19:04
PeterlinePeterline
84
If youconsole.log(myCanvas)and inspect the result, do you see a valid canvas element?
– Al.G.
Mar 7 at 19:09
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28
add a comment |
I am trying to implement a .PDF file to my website with mozilla pdfjs-dist.
This is my Script:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
</head>
<body>
<canvas id="addjob_pdf_preview"></canvas>
</body>
</html>
<script>
pdfjsLib.getDocument("PDFFILELINK").then(doc =>
doc.getPage(1).then(page =>
var myCanvas = document.getElementById("addjob_pdf_preview");
var context = myCanvas.getContext("2d");
var viewport = page.getViewport(1);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render(
canvasContext: context,
viewport: viewport
);
);
);
</script>
It throws this error:
TypeError: myCanvas.getContext is not a function
I build the implementation exactly after this tutorial: PDF.js Tutorial
I found a few threads about this topic, but im not able to understand what is wrong.
Some referred to the canvas API explanation: Canvas API
Which lead up to more questions than answers.
Regards
javascript pdf canvas
asked Mar 7 at 19:04
PeterlinePeterline
84
I am trying to implement a .PDF file to my website with mozilla pdfjs-dist.
This is my Script:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
</head>
<body>
<canvas id="addjob_pdf_preview"></canvas>
</body>
</html>
<script>
pdfjsLib.getDocument("PDFFILELINK").then(doc =>
doc.getPage(1).then(page =>
var myCanvas = document.getElementById("addjob_pdf_preview");
var context = myCanvas.getContext("2d");
var viewport = page.getViewport(1);
myCanvas.width = viewport.width;
myCanvas.height = viewport.height;
page.render(
canvasContext: context,
viewport: viewport
);
);
);
</script>
It throws this error:
TypeError: myCanvas.getContext is not a function
I build the implementation exactly after this tutorial: PDF.js Tutorial
I found a few threads about this topic, but im not able to understand what is wrong.
Some referred to the canvas API explanation: Canvas API
Which lead up to more questions than answers.
Regards
javascript pdf canvas
javascript pdf canvas
asked Mar 7 at 19:04
PeterlinePeterline
84
asked Mar 7 at 19:04
PeterlinePeterline
84
asked Mar 7 at 19:04
PeterlinePeterline
84
asked Mar 7 at 19:04
PeterlinePeterline
84
asked Mar 7 at 19:04
PeterlinePeterline
84
84
If youconsole.log(myCanvas)and inspect the result, do you see a valid canvas element?
– Al.G.
Mar 7 at 19:09
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28
add a comment |
If youconsole.log(myCanvas)and inspect the result, do you see a valid canvas element?
– Al.G.
Mar 7 at 19:09
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28
If you
console.log(myCanvas) and inspect the result, do you see a valid canvas element?– Al.G.
Mar 7 at 19:09
If you
console.log(myCanvas) and inspect the result, do you see a valid canvas element?– Al.G.
Mar 7 at 19:09
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55051092%2ftypeerror-mycanvas-getcontext-is-not-a-function-pdf-implementation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55051092%2ftypeerror-mycanvas-getcontext-is-not-a-function-pdf-implementation%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you
console.log(myCanvas)and inspect the result, do you see a valid canvas element?– Al.G.
Mar 7 at 19:09
you need the script within the HTML tag
– Steven Stark
Mar 7 at 19:11
@Al.G. - I added console.log("This file has" + doc.pdfInfo.numPages + " pages"); and got now this error: Cannot read property 'numPages' of undefined at pdfjsLib.getDocument.then.doc
– Peterline
Mar 7 at 19:42
Okay, the feedback in the console works. I had a typo in it. So the document gets loaded correctly, but it still gives me the error of the context back
– Peterline
Mar 7 at 20:28