Rendering HTML elements to canvas
You won't get real HTML rendering to <canvas>
per se currently, because canvas context does not have functions to render HTML elements.
There are some emulations:
html2canvas project http://html2canvas.hertzen.com/index.html (basically a HTML renderer attempt built on Javascript + canvas)
HTML to SVG to <canvas>
might be possible depending on your use case:
https://github.com/miohtama/Krusovice/blob/master/src/tools/html2svg2canvas.js
Also if you are using Firefox you can hack some extended permissions and then render a DOM window to <canvas>
https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas?redirectlocale=en-US&redirectslug=Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas
How can I convert an HTML element to a canvas element?
Sorry, the browser won't render HTML into a canvas.
It would be a potential security risk if you could, as HTML can include content (in particular images and iframes) from third-party sites. If canvas
could turn HTML content into an image and then you read the image data, you could potentially extract privileged content from other sites.
To get a canvas from HTML, you'd have to basically write your own HTML renderer from scratch using drawImage
and fillText
, which is a potentially huge task. There's one such attempt here but it's a bit dodgy and a long way from complete. (It even attempts to parse the HTML/CSS from scratch, which I think is crazy! It'd be easier to start from a real DOM node with styles applied, and read the styling using getComputedStyle
and relative positions of parts of it using offsetTop
et al.)
including raw HTML node to canvas element
Shortening the canvas (height) and appending div node to the HTML,
var div = document.createElement("div");
div.innerHTML= html
display_element.appendChild(div);
solved my problem.
Rendering html content to canvas
You cannot render arbitrary HTML to the canvas.
There are some libraries that approximate it, but that's all you've got for options for now.
There has been some discussion since at least 2009 about rendering "HTML document fragments" to the canvas, but no browser has seriously considered implementing anything like it yet.
To quote the HTML Canvas specification:
Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas.
(Source: WHATWG Spec)
Render HTML to an image
There is a lot of options and they all have their pro and cons.
Option 1: Use an API
- ApiFlash (based on chrome)
- EvoPDF (has an option for html)
- Grabzit
- HTML/CSS to Image API
- ...
Pros
- Execute Javascript
- Near perfect rendering
- Fast when caching options are correctly used
- Scale is handled by the APIs
- Precise timing, viewport, ...
- Most of the time they offer a free plan
Cons
- Not free if you plan to use them a lot
Option 2: Use one of the many available libraries
- dom-to-image
- wkhtmltoimage (included in the wkhtmltopdf tool)
- IMGKit (for ruby and based on wkhtmltoimage)
- imgkit (for python and based on wkhtmltoimage)
- python-webkit2png
- ...
Pros
- Conversion is quite fast most of the time
Cons
- Bad rendering
- Does not execute javascript
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Sometimes not so easy to install
- Complicated to scale
Option 3: Use PhantomJs and maybe a wrapper library
- PhantomJs
- node-webshot (javascript wrapper library for PhantomJs)
- ...
Pros
- Execute Javascript
- Quite fast
Cons
- Bad rendering
- No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
- Complicated to scale
- Not so easy to make it work if there is images to be loaded ...
Option 4: Use Chrome Headless and maybe a wrapper library
- Chrome Headless
- chrome-devtools-protocol
- Puppeteer (javascript wrapper library for Chrome headless)
- ...
Pros
- Execute Javascript
- Near perfect rendering
Cons
- Not so easy to have exactly the wanted result regarding:
- page load timing
- viewport dimensions
- Complicated to scale
- Quite slow and even slower if the html contains external links
Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.
Related Topics
How to Show Multiline Text in a Table Cell
Disable Form Autofill in Chrome Without Disabling Autocomplete
Why Do I Need a Doctype? (What Does It Do)
How to Change the Size of the Radio Button Using CSS
Center Triangle at Bottom of Div
Best Way to Manage Whitespace Between Inline List Items
Space Between Divs - Display Table-Cell
What Values for Checked and Selected Are False
CSS - Relative Positioned Parent Div Not Stretching to Absolute Child Div Height
Gmail Blocking Small Embedded Inline Images in Email Template
Is There a Max Size to the Length of a Hidden Input in HTML
CSS Select Elements with Partial Id
Is It Ok to Use Unknown HTML Tags
Fit Website Background Image to Screen Size
Stretching <A> Tag to Fill Entire <Li>
How Do Change the Color of the Text of an <Option> Within a <Select>