Hi!
This is the ‘normal’ code to render a PDF page (with pdf.js package discussed on an other thread):
var scale = 1.5;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
I tried to adapt this to Cocos Creator, by just changing the line getting the canvas:
var canvas = document.getElementById('GameCanvas');
Everything is fine, no error, but…nothing is displayed 
I checked file cocos2d-js.js to look for some context rendering stuff, but everything I tried failed.
I’m sure the solution is very simple, but I’m not familiar at all with all this rendering context stuff: can someone please point me to the right direction ?
Thank you.
–
Daniel
I assume GameCanvas is the one we used for game rendering ?
If so, it will be refreshed every frame and render game stuffs, so your pdf content will be overwrite. Another thing, on browsers that support WebGL, we will use WebGL context, then you won’t be able to use any Canvas 2d APIs on it.
You should create a new Canvas just like the sample, and use the Canvas element as an image source for a Sprite.
var tex = new cc.Texture2D();
tex.initWithElement(item.content);
tex.handleLoadedTexture();
var frame = new cc.SpriteFrame(tex, cc.rect(0, 0, canvas.width, canvas.height));
sprite.spriteFrame = frame;
Merci pour ton aide, Huabin !
You’r right, I should render the PDF pages into a sprite, which will then be displayed on each frames.
It make sense.
So, I created a Sprite node that I added to the scene canvas, and then tried to render the PDF page into that sprite.
Here is my code:
// Get the scene canvas, which is the sprite parent
var canvas = self.pdfSprite.node.parent;
// Create a 2d texture, using canvas as image source
var texture2d = new cc.Texture2D();
texture2d.initWithElement(canvas.content);
texture2d.handleLoadedTexture();
// Initialise the sprite frame with that texture
var frame = new cc.SpriteFrame(texture2d, cc.rect(0, 0, canvas.width, canvas.height));
self.pdfSprite.spriteFrame = frame;
// Render the PDF page into that texture
var scale = 1.5;
var viewport = page.getViewport(scale);
var context = texture2d;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
Unfortunately, it doesn’t work (no error, but nothing is displayed, and the sprite is added to the canvas, of course)
I guess the problem is the way I created the texture: I’m not sure canvas.content is the right parameter to provide to create it (but no error are reported).
Again, I’m sure your suggestion is fine, the rendering should occur ‘in’ the sprite texture, I just don’t know how to build and provide the ‘renderContext’ PDF library is expecting to render its page.
–
Daniel
I guess I should use ‘something’ like cc.RenderTexture to create the 2d texture, but it seems it is not supported in Cocos Creator (its not mentioned in the API)
–
Daniel
I don’t understand this, what is pdSprite ? a cc.Sprite ?
You will need to create a Canvas element as the texture source:
var canvas = document.createElement('Canvas');
var context = canvas.getContext('2d');
// Draw your pdf with this context
...
var texture2d = new cc.Texture2D();
texture2d.initWithElement(canvas);
texture2d.handleLoadedTexture();
Hi Huabin and thanks again for your help!
Yes, pdfSprite is a cc.Sprite which is added to scene canvas and in which I’m trying to render the PDF page.
I already tried something similar to what you suggest, without success…
Looking at your code, I understood my mistake: I was creating the spriteFrame BEFORE the pdf page was rendered in the texture! 
I thought it was a kind of pointer and that the spriteFrame would be updated with the rendered pdf page, but I was wrong…
Thanks to your help, I’m now able to render a PDF page inside a cc.Sprite: YEEPEE!!! 
Here is the updated code corresponding to the one posted on the first message of the thread:
(pdfSprite is a cc.Sprite already added to current scene canvas)
(page is a pdf.js object - check the ‘Viewing a .PDF file’ thread here: [SOLVED] Viewing a .PDF file )
// Get PDF page width & height
var scale = 1.0;
var viewport = page.getViewport(scale);
// Create a canvas and get the corresponding 2d drawing context
var canvas = document.createElement('Canvas');
canvas.height = viewport.height;
canvas.width = viewport.width;
var context = canvas.getContext('2d');
// Render the PDF page with this context
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
// Build a spriteFrame and use that context as texture source
var texture2d = new cc.Texture2D();
texture2d.initWithElement(canvas);
texture2d.handleLoadedTexture();
pdfSprite.spriteFrame = new cc.SpriteFrame(texture2d, cc.rect(0, 0, canvas.width, canvas.height));
I will update the PDF thread with a complete function allowing to render a PDF page into a cc.Sprite
PS: your code samples are much better looking than mine, with colors and everything: how do you do that? 
EDIT: Cool, thanks, my code looks much better like that 
(and it allowed me to see and correct a typo…)
–
Daniel
Great !
For code with more style you can try to add language name after
```javascript
// Your code
```
