Is there any way of accessing canvas 2D context under C++ when using emscripten?
I'd like to be able to draw simple shapes/paths using canvas' api functions like lineTo, fillRect1d done, etc. (so basically use any of the functions listed here.

I will point out that I would prefer not to rely on SDL, but if it's the only reliable approach then is there a way to force it to compile to JavaScript so that the result won't use WebGL, but basic canvas api?

Or should I maybe do a simple mapping of the api functions following this suggestion: Calling JavaScript From C/C++ ?

Until anyone shares a better solution I will most likely do the mapping and share it here as soon as I'm done with it.

Is there any way of accessing canvas 2D context under C++ when using emscripten?
I'd like to be able to draw simple shapes/paths using canvas' api functions like lineTo, fillRect1d done, etc. (so basically use any of the functions listed here.

I will point out that I would prefer not to rely on SDL, but if it's the only reliable approach then is there a way to force it to compile to JavaScript so that the result won't use WebGL, but basic canvas api?

Or should I maybe do a simple mapping of the api functions following this suggestion: Calling JavaScript From C/C++ ?

Until anyone shares a better solution I will most likely do the mapping and share it here as soon as I'm done with it.

• javascript
• c++
• canvas
• emscripten

• Do your canvas set up in Javascript and do the mapping. Should be fairly easy to do. – abergmeier Commented Jun 17, 2013 at 5:25
• Did you find a solution for this? Or did you do the mapping? – user3605780 Commented Apr 15, 2019 at 14:13
• Wish I could help but this was so long ago I can barely remember. I think I decided to do the mapping. Unfortunately the project I was working on got cancelled so I never got to finish and share it. – Konrad Madej Commented Apr 16, 2019 at 16:37

3 Answers 3

According to the Emscripten documentation you can use SDL with C++ to get at the canvas when you generate Javascript. The SDL conversion is implemented in native canvas calls.

I've used dynamic binding throught embind / emscripten::val

Example (emscripten v3.0.0):

#include <emscripten/val.h>

auto main() -> int {
  const auto document = emscripten::val::global("document");
  const auto canvas =
      document.call<emscripten::val, std::string>("querySelector", "canvas");

  auto ctx = canvas.call<emscripten::val, std::string>("getContext", "2d");

  const auto width = canvas["width"].as<int>();
  const auto height = canvas["height"].as<int>();

  ctx.call<void>("clearRect", 0, 0, width, height);

  // rect
  ctx.set("fillStyle", "white");
  ctx.call<void>("fillRect", 0, 0, width, height);

  // line
  ctx.set("strokeStyle", "black");
  ctx.call<void>("moveTo", 0, 0);
  ctx.call<void>("lineTo", width, height);
  ctx.call<void>("stroke");

  // text
  ctx.set("fillStyle", "black");
  ctx.set("font", "bold 48px serif");
  ctx.call<void, std::string>("fillText", "Hello World!", width / 2,
                              height / 2);

  return 0;
}

emcc src/main.cpp -g -s ENVIRONMENT='web' -std=c++20 --bind -o build/main.js

P.S.

btw same approach can be used to work with any Web API, if no static/predefined bindings exist in emscripten or you just don't want to use ones that exist. E.g. I wanted to stick to CanvasRenderingContext2D Web API as close as possible, so SDL wasn't my choice.

From my understanding, SDL initialized with SDL_SWSURFACE will created a "2d" context rather than a "webgl"/"experimental-webgl" one. Functionality can be seen in the sdl_rotozoom test or on GitHub: https://github.com/kripken/emscripten/blob/master/tests/sdl_rotozoom.c