Emscripten - C++ with pure html5 canvas support (not WebGL)

Question

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.

Interdict

Do your canvas set up in Javascript and do the mapping. Should be fairly easy to do. – Aitken

Did you find a solution for this? Or did you do the mapping? – Priesthood

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. – Interdict

Answer 1

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.

Insomuch

Answer 2

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.

Sandpaper

Answer 3

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

Scaler