Canvas++

An implementation of the JavaScript canvas api, written in C++.

Modern browsers that support HTML5 comes with a handy element called the canvas. It provides a surface that can be drawn upon using JavaScript. Using this canvas all sorts of things can be created.

This library makes it possible to embed such a canvas into another application. This is especially useful for games that can use the canvas to draw it’s UI’s.

Building

OS X is the only supported platform at the moment, and you need to have both cmake and boost installed to be able to build the project.

To build the dependencies Skia and V8 execute the following command:
./deps/fetch_and_build.sh

Create a build folder, this step is optional, but it’s encouraged. It makes cleaning up a lot easier, especially because cmake creates a lot of files all over the place:
mkdir build
cd build

Generate makefiles for the project:
cmake -DCMAKE_BUILD_TYPE=Debug ..

Compile:
make

When this is done, the demo application can be located and started from the build/bin directory.
./build/bin/demo

Example

A simple example that creates a threaded canvas and load a JavaScript file.

Canvas * canvas = new Canvas(800, 600, Canvas::kARGB, true);
canvas->startWithFile("...");
//canvas->startWithCode("..."); We can just as well supply a string containing code.

It is only possible to call either startWithFile("...") or startWithCode("...") once. The second call to one of the functions will throw an assert.

We need to have some target that our canvas should paint to. This could for example be a SDL_Surface.

void * imageTarget = ...;

Then we ask the canvas to paint into our target.

if (canvas->isDirty())
  canvas->paint(imageTarget);

JavaScript API

There are some differences between the HTML5 canvas api and Canvas++. Most notably is the getContext() function. Instead of calling it on the canvas dom element, it’s located on the window object. So we need to call window.getContext('2d').

The same apply to the width and height attributes. Instead of being located on the dom element, they are accessed through the window object, window.width and window.height.

Window Object

Accessed through the global window object.

• Object getContext(string type) – Returns the graphics context. The only valid context is ‘2d’.
• int setInterval(function func) – Register a function that will be called when the canvas should repaint itself. Returns an integer identifying the callback function.
• clearInterval(int id) – Removes the callback function with the corresponding id.
• int width – The width of the window.
• int height – The height of the window.

Console Object

Accessed through the global console object.

• void log(string text) – Output a string to the log system.

Context object

List of all the methods and attributes that are currently implemented.

• string fillStyle
• string strokeStyle
• float lineWidth
• string lineCap
• float globalAlpha
• void scale(float x, float y)
• void rotate(float angle)
• void translate(float x, float y)
• void drawImage(Object image, float x, float y, [Optional] float width, float height)
• void beginPath()
• void closePath()
• void fill()
• void stroke()
• void moveTo(float x, float y)
• void lineTo(float x, float y)
• void quadraticCurveTo(float cpx, float cpy, float x, float y)
• void bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y)
• void arcTo(float x1, float y1, float x2, float y2, float radius)
• void rect(float x, float y, float width, float height)
• void fillRect(float x, float y, float width, float height)
• void strokeRect(float x, float y, float width, float height)
• void clearRect(float x, float y, float width, float height)
• void clear() - Non standard function that clears the whole canvas.

License

See the LICENSE file for legal information.