CSC517 OffScreenCanvas Servo

About Servo:

Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except the fact that it is specially tuned for better memory safety and concurrency features. Hence, servo seeks to create a highly parallel environment, in which many components are handled by fine-grained and isolated tasks.

Servo makes web-page rendering faster by using parallel layout, styling, web-renders and constellation. Basically, these help to sandbox processes, threads and tasks based on their privilege levels. Sandboxing not only makes way for more responsive web-pages, but it also makes then more secure and robust. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affects other tabs, browser or eve other elements of the same web-page. So, in a way, Rust lets the browser to "fail better" than other browsers.

CSS3 and HTML5 parser of servo engine have been successfully implemented using Rust, and it successfully passes the acid2 test. Although it is still in early phase of development, it renders web pages significantly more quickly and smoothly, compared to Mozilla's other rendering engines.

Why use rust ? Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.

About Off Screen Canvas:

The HTML specification defines a <canvas> element that can use a 2d or 3d rendering context. A new specification was recently developed that defines a canvas that can be used without being associated with an in-page canvas element, allowing for more efficient rendering. To use the OffscreenCanvas API, we have used a RenderingContext that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context, the transferToImageBitmap() method can be called to save the most recent rendered image. This method returns an ImageBitmap object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.

Problem Statement:

The following tasks were accomplished in the project:

• Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.

• Implementing the OffscreenCanvas Constructor [1] that creates a new canvas.

• The OffscreenCanvas Constructor has essentially 2 properties: OffscreenCanvas.width and OffscreenCanvas.height, which represents the width and height of the canvas respectively.

• The constructor also has the method OffscreenCanvas.getContext().

Web IDL

Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an IDL variant with:

• A number of features that allow one to more easily describe the behavior of common script objects in a web context.

• A mapping of how interfaces described with Web IDL correspond to language constructs within an ECMAScript execution environment.

Code Flow

• First, IDL files namely OffScreenCanvas.webidl and OffScreenCanvasRenderingContext2D.webidl were added at the locations components/script/dom/webidls/OffScreenCanvas.webidl and components/script/dom/webidls/OffScreenCanvasRenderingContext2D.webidl respectively.