Unable to run Html containing Canvas in headless mode using HtmlUnit?

[nites67]

I am using htmlunit 2.35.0 version to run the html in headless mode. It is working fine with html containing SVG. Now, I am using a custom JavaScript framework called geotoolkit which renders canvas images. I am facing issue when I try to run the html with canvas in headless mode using htmlunit. Please find the below code and error logs. Can anyone please let me know how to fix the issue ? I have also raised the issue on stackoverflow. Here is the link

https://stackoverflow.com/questions/60372112/how-to-use-htmlunit-to-run-html-containing-canvas-in-headless-mode

import java.io.File;
import java.nio.file.Paths;
import com.gargoylesoftware.htmlunit.WebClient;
import com.gargoylesoftware.htmlunit.html.HtmlPage;

String path = Paths.get("Input/Editor").toAbsolutePath()+File.separator+"canvas.html";
WebClient webClient = new WebClient();
File file = new File(path);
HtmlPage page = webClient.getPage(file.toURI().toURL().toString());         
webClient.getOptions().setJavaScriptEnabled(true);
webClient.waitForBackgroundJavaScript(10000);                       
System.out.println(page.asXml());
webClient.close();

Feb 24, 2020 11:22:29 AM com.gargoylesoftware.htmlunit.javascript.host.canvas.CanvasRenderingContext2D createImageData
    INFO: CanvasRenderingContext2D.createImageData() not yet implemented
    Feb 24, 2020 11:22:29 AM com.gargoylesoftware.htmlunit.javascript.DefaultJavaScriptErrorListener scriptException
    SEVERE: Error during JavaScript execution
    ======= EXCEPTION START ========
    EcmaError: lineNumber=[1426] column=[0] lineSource=[null] name=[TypeError] sourceName=[file:/D:/Playground/HeadlessTest/Input/BHAEditor/geotoolkit/geotoolkit.adv.js] message=[TypeError: Cannot read property "width" from undefined (file:/D:/Playground/HeadlessTest/Input/BHAEditor/geotoolkit/geotoolkit.adv.js#1426)]
    com.gargoylesoftware.htmlunit.ScriptException: TypeError: Cannot read property "width" from undefined (file:/D:/Playground/HeadlessTest/Input/BHAEditor/geotoolkit/geotoolkit.adv.js#1426)
        at com.gargoylesoftware.htmlunit.javascript.JavaScriptEngine$HtmlUnitContextAction.run(JavaScriptEngine.java:885)
        at net.sourceforge.htmlunit.corejs.javascript.Context.call(Context.java:617)
        at net.sourceforge.htmlunit.corejs.javascript.ContextFactory.call(ContextFactory.java:534)

[rbri]

working on fixing this

[rbri]

Have done many updates for the ImageData handling.
Will make a new snapshot build available soon (check https://twitter.com/HtmlUnit).

Please try your sample with the new snapshot and report your results.

[nites67]

Thanks for the update. Once the build is released, I will check and update you :)

[nites67]

Hi, Can you please let me know if the Snapshot is available from maven central ?

[rbri]

Snapshots are available from sonatype staging

You can add this to your pom

<snapshotRepository>
  <id>sonatype-nexus-snapshots</id>
  <url>https://oss.sonatype.org/content/repositories/snapshots</url>
</snapshotRepository>

[nites67]

Thanks for the update. Is this the version 2.38.0-SNAPSHOT which i should use ?

[rbri]

Yes please

[nites67]

Thanks for the update. I will check and let you know

[nites67]

Hi, I took the latest updates which you created i did not get any errors when i ran the code but i get these below info messages. Can you please advise ?

com.gargoylesoftware.htmlunit.javascript.host.canvas.CanvasRenderingContext2D SetLineDash
INFO : CanvasRenderingContext2D.setLineDash() not yet implemented.
com.gargoylesoftware.htmlunit.javascript.host.canvas.rendering.AwtRenderingBackend setFillStyle
INFO : Cannot find color 'lightblue'
com.gargoylesoftware.htmlunit.javascript.host.canvas.rendering.AwtRenderingBackend  setStrokeStyle
INFO : Cannot find color 'grey'

[rbri]

Ok, at least the color stuff is fixable.
Do you need the dash stuff also?

[nites67]

Hi, Yes I would need it .
In Addition, It is also giving the below error
com.gargoylesoftware.htmlunit.javascript.host.canvas.CanvasRenderingContext2D clip
INFO : CanvasRenderingContext2D.clip() not yet implemented.

I am generating the canvas in html and converting it to base 64 image using HTMLUnit. I see that when i run the same html in a browser, i get to see the clear image as the base 64 data is properly generated. But when i execute the html using HTMLUnit, the canvas get generated but the base 64 generated from canvas is not the same which in turn results in corrupted image. I suspect it is because of these methods like clip, setLineDash , fillstyle and colors which are yet to be implemented. Can you please advise ?

[rbri]

Any chance for me to reproduce your problem here. Can you attach your code or maybe send it via private mail?

[rbri]

Ok, color name handling for fillStyle is fixed

[rbri]

CanvasRenderingContext2D.strokeStyle also fixed

[rbri]

Clip impl is on the way - a bit more complicated.
But way to test your code here will be more efficient....