Skia graphics library in Chrome: First impressions

· by · in

With the release of the WebKit-based Chrome browser, Google also introduced a handful of new backends for the browser engine including a new HTTP stack and the Skia graphics library. Google’s Android WebKit code drops have previously featured Skia for rendering, though this is the first time the sources have been made freely available. The code is apparently derived from Google’s 2005 acquisition of North Carolina-based software firm Skia and is now provided under the Open Source Apache License 2.0.

Weighing in at some 80,000 lines of code (to Cairo’s 90,000 as a ballpark reference) and written in C++, some of the differentiating features include:

  • Optimised software-based rasteriser (module sgl/)
  • Optional GL-based acceleration of certain graphics operations including shader support and textures (module gl/)
  • Animation capabilities (module animator/)
  • Some built-in SVG support (module (svg/)
  • Built-in image decoders: PNG, JPEG, GIF, BMP, WBMP, ICO (modules images/)
  • Text capabilities (no built-in support for complex scripts)
  • Some awareness of higher-level UI toolkit constructs (platform windows, platform events): Mac, Unix (sic. X11, incomplete), Windows, wxwidgets
  • Performace features
    • Copy-on-write for images and certain other data types
    • Extensive use of the stack, both internally and for API consumers to avoid needless allocations and memory fragmentation
    • Thread-safety to enable parallelisation

The library is portable and has (optional) platform-specific backends:

  • Fonts: Android / Ascender, FreeType, Windows (GDI)
  • Threading: pthread, Windows
  • XML: expat, tinyxml
  • Android shared memory (ashmem) for inter-process image data references

Skia Hello World

In this simple example we draw a few rectangles to a memory-based image buffer. This also demonstrates how one might integrate with the platform graphics system to get something on screen, though in this case we’re using Cairo to save the resulting image to disk:

#include "SkBitmap.h"
#include "SkDevice.h"
#include "SkPaint.h"
#include "SkRect.h"
#include <cairo.h>
 
int main()
{
  SkBitmap bitmap;
  bitmap.setConfig(SkBitmap::kARGB_8888_Config, 100, 100);
  bitmap.allocPixels();
  SkDevice device(bitmap);
  SkCanvas canvas(&device);
  SkPaint paint;
  SkRect r;
 
  paint.setARGB(255, 255, 255, 255);
  r.set(10, 10, 20, 20);
  canvas.drawRect(r, paint);
 
  paint.setARGB(255, 255, 0, 0);
  r.offset(5, 5);
  canvas.drawRect(r, paint);
 
  paint.setARGB(255, 0, 0, 255);
  r.offset(5, 5);
  canvas.drawRect(r, paint);
 
  {
    SkAutoLockPixels image_lock(bitmap);
    cairo_surface_t* surface = cairo_image_surface_create_for_data(
        (unsigned char*)bitmap.getPixels(), CAIRO_FORMAT_ARGB32,
        bitmap.width(), bitmap.height(), bitmap.rowBytes());
    cairo_surface_write_to_png(surface, "snapshot.png");
    cairo_surface_destroy(surface);
  }
 
  return 0;
}

You can build this example for yourself linking statically to the libskia.a object file generated during the Chrome build process on Linux.

Not just for Google Chrome

The Skia backend in WebKit, the first parts of which are already hitting SVN (r35852, r36074) isn’t limited to use in the Chrome/Windows configuration and some work has already been done to get it up and running on Linux/GTK+ as part of the ongoing porting effort.

Related posts:

  1. A good week for text and graphics
  2. WebKit HTML5 canvas enhancements, Acid2 support and more
  3. Accelerating WebKit with OpenVG