This library is a partial implementation of Html5 Canvas 2D API. It has been created using Skia and V8. The goal of this library is to provide an implementation of the Html5 Canvas in Ogre3D.  Thus you don’t need to learn a new 2D API and as a bonus there are a lot of cool demos using canvas out there. Sadly, this library wasn’t used in our multitouch prototype, but the Timeline could have been done using this library.

RGBA example Linear gradient example Timeline example

Development status :


  • Context : save, restore.
  • Transformation : scale, rotate, transform, setTransform.
  • Image drawing : drawImage using an Ogre::Image.
  • Compositing : globalAlpha, globalCompositeOperation.
  • Line styles : lineWidth, lineCap, lineJoin, miterLimit.
  • Colors, styles and shadow : strokeStyle, fillStyle, createLineaGradient, createRadialGradient, createPattern.
  • Paths : beginPath, closePath, fill, stroke, clip, moveTo, lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc, rect.
  • Text : fillText, strokeText.
  • Rectangles : clearRect, fillRect, strokeRect.

ToDo :

  • Line styles : dash
  • Colors, styles and shadow : shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
  • Paths : isPointInPath
  • Text : font, textAlign, textBaseline, measureText
  • Pixel manipulation : createImageData, getImageData, putImageData
  • Use shared pointer for gradients, patterns and images ?
  • Fix alpha issue for drawImage with alpha png

Links :

Binary demo : OgreCanvasDemo1.zip
Source code : svn on code.google
Documentation : doxygen Ogre::Canvas, doxygen Ogre::CanvasV8
License : MIT

If you need an overview of the canvas API, you should take a look at the excellent Html5 Canvas Cheat Sheet.


Leave a Reply