HTML -> EPUB3 not rendering canvas elements

[drscotthawley]

Hi, I have an HTML page: https://hedges.belmont.edu/classification_exercises/
that has some interactive graphical Javascript elements that use HTML5 canvas. I am interested in rendering this as EPUB3 since EPUB3 includes support for HTML5 and canvas.

I saved the file locally from my browser (Chrome: Save As), which saved the html and a directory. This I imported into Calibre which became a ZIP.

Then I clicked on Convert books, went down to EPUB Format, and changed the EPUB version from 2 to 3. Then I clicked on "OK" in the bottom right. The conversion happened with out errors I think (log below. there is a mention of a permission error, odd because I installed via flatpak & Pop!_OS's PopShop package manager).

But when I view the EPUB file in Calibre, all of the canvas elements are simply blank, and my javascript slider is non-responsive.

Can someone advise me on what I need to do to fix this?

As I search around for posts involving Calibre, HTML5 and Canvas, I see discussions indicating that Canvas should be supported by Calibre, even the latest release notes (Oct 8) talking about canvas support being fixed (for PDF...interestingly, if I export to PDF the canvas elements are also blank).

Thanks very much. I am new to this, so I apologize in advance if there's something obviously stupid I forgot. ;-)

Here is the conversion log:

Spoiler:

 Convert book 1 of 1 (Classification Exercises: Disentangling Things)
Processing archive...
Conversion options changed from defaults:
  verbose: 2
  output_profile: 'ipad3'
  epub_version: '3'
  read_metadata_from_opf: '/tmp/calibre_5.2.0_tmp_l3f8w655/onxf7ani.opf'
Resolved conversion options
calibre version: 5.2.0
{'asciiize': False,
 'author_sort': None,
 'authors': None,
 'base_font_size': 0.0,
 'book_producer': None,
 'breadth_first': False,
 'change_justification': 'original',
 'chapter': "//*[((name()='h1' or name()='h2') and re:test(., "
            "'\\s*((chapter|book|section|part)\\s+)|((prolog|prologue|epilogue)(\\s+|$))', "
            "'i')) or @class = 'chapter']",
 'chapter_mark': 'pagebreak',
 'comments': None,
 'cover': None,
 'debug_pipeline': None,
 'dehyphenate': True,
 'delete_blank_paragraphs': True,
 'disable_font_rescaling': False,
 'dont_package': False,
 'dont_split_on_page_breaks': False,
 'duplicate_links_in_toc': False,
 'embed_all_fonts': False,
 'embed_font_family': None,
 'enable_heuristics': False,
 'epub_flatten': False,
 'epub_inline_toc': False,
 'epub_toc_at_end': False,
 'epub_version': '3',
 'expand_css': False,
 'extra_css': None,
 'extract_to': None,
 'filter_css': '',
 'fix_indents': True,
 'flow_size': 260,
 'font_size_mapping': None,
 'format_scene_breaks': True,
 'html_unwrap_factor': 0.4,
 'input_encoding': None,
 'input_profile': ,
 'insert_blank_line': False,
 'insert_blank_line_size': 0.5,
 'insert_metadata': False,
 'isbn': None,
 'italicize_common_cases': True,
 'keep_ligatures': False,
 'language': None,
 'level1_toc': None,
 'level2_toc': None,
 'level3_toc': None,
 'line_height': 0.0,
 'linearize_tables': False,
 'margin_bottom': 5.0,
 'margin_left': 5.0,
 'margin_right': 5.0,
 'margin_top': 5.0,
 'markup_chapter_headings': True,
 'max_levels': 5,
 'max_toc_links': 50,
 'minimum_line_height': 120.0,
 'no_chapters_in_toc': False,
 'no_default_epub_cover': False,
 'no_inline_navbars': False,
 'no_svg_cover': False,
 'output_profile': ,
 'page_breaks_before': "//*[name()='h1' or name()='h2']",
 'prefer_metadata_cover': False,
 'preserve_cover_aspect_ratio': False,
 'pretty_print': True,
 'pubdate': None,
 'publisher': None,
 'rating': None,
 'read_metadata_from_opf': '/tmp/calibre_5.2.0_tmp_l3f8w655/onxf7ani.opf',
 'remove_fake_margins': True,
 'remove_first_image': False,
 'remove_paragraph_spacing': False,
 'remove_paragraph_spacing_indent_size': 1.5,
 'renumber_headings': True,
 'replace_scene_breaks': '',
 'search_replace': '[]',
 'series': None,
 'series_index': None,
 'smarten_punctuation': False,
 'sr1_replace': None,
 'sr1_search': None,
 'sr2_replace': None,
 'sr2_search': None,
 'sr3_replace': None,
 'sr3_search': None,
 'start_reading_at': None,
 'subset_embedded_fonts': False,
 'tags': None,
 'timestamp': None,
 'title': None,
 'title_sort': None,
 'toc_filter': None,
 'toc_threshold': 6,
 'toc_title': None,
 'transform_css_rules': '[]',
 'unsmarten_punctuation': False,
 'unwrap_lines': True,
 'use_auto_toc': False,
 'verbose': 2}
InputFormatPlugin: HTML Input running
on /tmp/calibre_5.2.0_tmp_l3f8w655/9ofwo_2e_pl_arc/content.opf
Parsing all content...
Manifest item 'toc.ncx' not found
Parsing Classification Exercises_ Disentangling Things.html ...
Generating default TOC from spine...
Merging user specified metadata...
Detecting structure...
Auto generated TOC with 0 entries.
Flattening CSS and remapping font sizes...
Source base font size is 14.00000pt
Removing fake margins...
Found 8 items of level: div_1
Found 2 items of level: div_2
Found 3 items of level: div_4
Found 2 items of level: div_3
Ignoring level div_3
Ignoring level div_4
div_1  left margin stats: Counter()
div_1  right margin stats: Counter()
div_2  left margin stats: Counter()
div_2  right margin stats: Counter()
Cleaning up manifest...
Trimming unused files from manifest...
Creating EPUB Output...
Splitting markup on page breaks and flow limits, if any...
Splitting on page-break at id=calibre_pb_0
Splitting on page-break at id=calibre_pb_1
Splitting on page-break at id=calibre_pb_2
Splitting on page-break at id=calibre_pb_3
Looking for large trees in Classification%20Exercises_%20Disentangling%20Things.html...
No large trees found
Split into 4 parts
Generating default cover
QStandardPaths: wrong permissions on runtime directory /run/user/1000, 7755 instead of 7700
This EPUB file has no Table of Contents. Creating a default TOC
Upgrading to EPUB 3...
EPUB output written to /tmp/calibre_5.2.0_tmp_l3f8w655/qv8fvr4a.epub

(PS- my selected eReader device in Calibre is iPad/iPhone)

[kovidgoyal]

The calibre viewer is simply chrome. So your canvas and JS elements should work automatically. Open the developer tools in the viewer and look in the console for any errors.

[drscotthawley]

Oh hey! It's just that the Calibre *VIEWER* won't render these elements!
I imported the EPUB3 file into iBooks on my iPad and the interactive graphs are there!

Posted the file here in case someone wants to try: https://hedges.belmont.edu/classific...assy_book.epub

[drscotthawley]

@kovidgoyal thank you for your reply. I didn't see it before I wrote my reply.

When I look at the Console in Calbre, I see the error:

DevTools failed to parse SourceMap: clbr://internal.sandbox/book/vis.map

Hmmm. What does that mean?

vis.js is one of the files in my ZIP. But even when I had brought the js files inside my HTML file so it was just one big file, the canvas element still wasn't rendering in Calibre.

[drscotthawley]

@kovidgoyal
I inspected in Calbibre the EPUB generated from the one-big-file version with no imports (which I will post here: https://hedges.belmont.edu/classific...es/classy.html)

And after I convert and try to view it in Calibre, no error messages appear on the Developer Tools Console (e.g. the vis.map error is no longer there) , but no canvas elements appear either. .

Trying to view the HTML in regular Chrome, it works fine.


Also, apparently I misspoke earlier: the iPad renders the first graph ok, but the second appears as blank. :-(

Adding log:

Spoiler:

Convert book 1 of 1 (Classification Exercises: Disentangling Things)
Processing archive...
Conversion options changed from defaults:
  epub_version: '3'
  output_profile: 'ipad3'
  read_metadata_from_opf: '/tmp/calibre_5.2.0_tmp_l3f8w655/bqnr8ans.opf'
  verbose: 2
  flow_size: 2048
Resolved conversion options
calibre version: 5.2.0
{'asciiize': False,
 'author_sort': None,
 'authors': None,
 'base_font_size': 0.0,
 'book_producer': None,
 'breadth_first': False,
 'change_justification': 'original',
 'chapter': "//*[((name()='h1' or name()='h2') and re:test(., "
            "'\\s*((chapter|book|section|part)\\s+)|((prolog|prologue|epilogue)(\\s+|$))', "
            "'i')) or @class = 'chapter']",
 'chapter_mark': 'pagebreak',
 'comments': None,
 'cover': None,
 'debug_pipeline': None,
 'dehyphenate': True,
 'delete_blank_paragraphs': True,
 'disable_font_rescaling': False,
 'dont_package': False,
 'dont_split_on_page_breaks': False,
 'duplicate_links_in_toc': False,
 'embed_all_fonts': False,
 'embed_font_family': None,
 'enable_heuristics': False,
 'epub_flatten': False,
 'epub_inline_toc': False,
 'epub_toc_at_end': False,
 'epub_version': '3',
 'expand_css': False,
 'extra_css': None,
 'extract_to': None,
 'filter_css': '',
 'fix_indents': True,
 'flow_size': 2048,
 'font_size_mapping': None,
 'format_scene_breaks': True,
 'html_unwrap_factor': 0.4,
 'input_encoding': None,
 'input_profile': ,
 'insert_blank_line': False,
 'insert_blank_line_size': 0.5,
 'insert_metadata': False,
 'isbn': None,
 'italicize_common_cases': True,
 'keep_ligatures': False,
 'language': None,
 'level1_toc': None,
 'level2_toc': None,
 'level3_toc': None,
 'line_height': 0.0,
 'linearize_tables': False,
 'margin_bottom': 5.0,
 'margin_left': 5.0,
 'margin_right': 5.0,
 'margin_top': 5.0,
 'markup_chapter_headings': True,
 'max_levels': 5,
 'max_toc_links': 50,
 'minimum_line_height': 120.0,
 'no_chapters_in_toc': False,
 'no_default_epub_cover': False,
 'no_inline_navbars': False,
 'no_svg_cover': False,
 'output_profile': ,
 'page_breaks_before': "//*[name()='h1' or name()='h2']",
 'prefer_metadata_cover': False,
 'preserve_cover_aspect_ratio': False,
 'pretty_print': True,
 'pubdate': None,
 'publisher': None,
 'rating': None,
 'read_metadata_from_opf': '/tmp/calibre_5.2.0_tmp_l3f8w655/bqnr8ans.opf',
 'remove_fake_margins': True,
 'remove_first_image': False,
 'remove_paragraph_spacing': False,
 'remove_paragraph_spacing_indent_size': 1.5,
 'renumber_headings': True,
 'replace_scene_breaks': '',
 'search_replace': '[]',
 'series': None,
 'series_index': None,
 'smarten_punctuation': False,
 'sr1_replace': None,
 'sr1_search': None,
 'sr2_replace': None,
 'sr2_search': None,
 'sr3_replace': None,
 'sr3_search': None,
 'start_reading_at': None,
 'subset_embedded_fonts': False,
 'tags': None,
 'timestamp': None,
 'title': None,
 'title_sort': None,
 'toc_filter': None,
 'toc_threshold': 6,
 'toc_title': None,
 'transform_css_rules': '[]',
 'unsmarten_punctuation': False,
 'unwrap_lines': True,
 'use_auto_toc': False,
 'verbose': 2}
InputFormatPlugin: HTML Input running
on /tmp/calibre_5.2.0_tmp_l3f8w655/890qap6f_pl_arc/content.opf
Parsing all content...
Manifest item 'toc.ncx' not found
Parsing classy.html ...
Generating default TOC from spine...
Merging user specified metadata...
Detecting structure...
Auto generated TOC with 0 entries.
Flattening CSS and remapping font sizes...
Source base font size is 14.00000pt
Removing fake margins...
Found 8 items of level: div_1
Found 2 items of level: div_2
Found 3 items of level: div_4
Found 2 items of level: div_3
Ignoring level div_4
Ignoring level div_3
div_1  left margin stats: Counter()
div_1  right margin stats: Counter()
div_2  left margin stats: Counter()
div_2  right margin stats: Counter()
Cleaning up manifest...
Trimming unused files from manifest...
Creating EPUB Output...
Splitting markup on page breaks and flow limits, if any...
Splitting on page-break at id=calibre_pb_0
Splitting on page-break at id=calibre_pb_1
Splitting on page-break at id=calibre_pb_2
Splitting on page-break at id=calibre_pb_3
Looking for large trees in classy.html...
No large trees found
Split into 4 parts
Generating default cover
QStandardPaths: wrong permissions on runtime directory /run/user/1000, 7755 instead of 7700
This EPUB file has no Table of Contents. Creating a default TOC
Upgrading to EPUB 3...
EPUB output written to /tmp/calibre_5.2.0_tmp_l3f8w655/32g1w6v6.epub

[kovidgoyal]

Figure out what is rendering the canvas in the html page, and insert some code into the epub to call it, probably it is being rendered n some kind of browser event that is not present in the viewer.