22

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.

3
  • Do your canvas set up in Javascript and do the mapping. Should be fairly easy to do.
    – abergmeier
    Jun 17, 2013 at 5:25
  • Did you find a solution for this? Or did you do the mapping? 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. Apr 16, 2019 at 16:37

3 Answers 3

8

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.

0
1

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.