question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas error when using toCanvas()

See original GitHub issue

Shortened code snippet:

const view = new vega
    .View(vega.parse(chartData))
    .renderer('none')
    .initialize()
view
    .toCanvas()
    .then(canvas => {
        consle.log('Generating image...!')
        fs.writeFile('./growth.png', canvas.toBuffer(), () => {
         // Handling
        })
    })

Full error log:

Error: CanvasRenderer is missing a valid canvas or context
	at Object.error (/home/social/IRFGrowth/node_modules/vega-util/build/vega-util.js:40:11)
	at CanvasRenderer.prototype$6.resize (/home/social/IRFGrowth/node_modules/vega-scenegraph/build/vega-scenegraph.js:3763:26)
	at CanvasRenderer.prototype$4.initialize (/home/social/IRFGrowth/node_modules/vega-scenegraph/build/vega-scenegraph.js:3294:17)
	at CanvasRenderer.prototype$6.initialize (/home/social/IRFGrowth/node_modules/vega-scenegraph/build/vega-scenegraph.js:3750:28)
	at initializeRenderer (/home/social/IRFGrowth/node_modules/vega-view/build/vega-view.js:653:8)
	at renderHeadless (/home/social/IRFGrowth/node_modules/vega-view/build/vega-view.js:776:12)
	at processTicksAndRejections (internal/process/task_queues.js:97:5)
	at async View.renderToCanvas [as toCanvas] (/home/social/IRFGrowth/node_modules/vega-view/build/vega-view.js:811:15)

To fix this, I’ve tried:

  • Reinstalling all dependencies in my project (including canvas, vega, fs, node-pre-gyp)
  • Using various node versions
  • Using various canvas versions

This identical error persists no matter the case, seeking some help.

Node version: 12.18.3 NPM version: 6.14.7 Vega version: 5.13.0 Canvas version: 2.6.1

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Maxim-Mazurokcommented, Dec 9, 2021

Same error on Win 10, npm ci resolved the issue

1reaction
domoritzcommented, Aug 2, 2020

Hmm, I don’t know about windows but our tests are running on ubuntu. Could you take a look at https://github.com/vega/vega/blob/master/.github/workflows/test.yml and see whether the build steps help you?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is Canvas not loading on Chrome - Instructure Community
Solved: Canvas.instructure.com fails to load while using Chrome and sometimes Firefox, IE and Edge. Is there a reason for this?
Read more >
canvas security error for svg images - Stack Overflow
I found a solution. Apparently canvas has another function to draw svgs "drawSvg" so I used it and it works.
Read more >
LTIAdvanced grade passback to Canvas error - WeBWorK
Hi,. We just started using Canvas to Webwork LTIAdvanced. Testing went fine with both student account management and grade passback.
Read more >
html-to-image - npm
Generates an image from a DOM node using HTML5 canvas and SVG.. Latest version: 1.11.3, last published: 13 days ago.
Read more >
Why am I getting an "unsupported browser" message in ...
Why am I getting an "unsupported browser" message in Canvas? If you are receiving the following error message, it is because you are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found