Merge branch 'transformations'

Readme.md

@@ -10,7 +10,9 @@
 ## TODO
 
      [x] drawing shapes
-     [ ] line styles
+     [x] line styles
+     [ ] anti aliasing
+     [ ] match canvas defaults (not all args are required)
      [ ] list of valid css colors
      [ ] gradients
      [ ] Image

src/context2d.cc

@@ -84,6 +84,11 @@ Context2d::Initialize(Handle<Object> target) {
 
   // Prototype
   Local<ObjectTemplate> proto = t->PrototypeTemplate();
+  NODE_SET_PROTOTYPE_METHOD(t, "save", Save);
+  NODE_SET_PROTOTYPE_METHOD(t, "restore", Restore);
+  NODE_SET_PROTOTYPE_METHOD(t, "rotate", Rotate);
+  NODE_SET_PROTOTYPE_METHOD(t, "translate", Translate);
+  NODE_SET_PROTOTYPE_METHOD(t, "scale", Scale);
   NODE_SET_PROTOTYPE_METHOD(t, "fill", Fill);
   NODE_SET_PROTOTYPE_METHOD(t, "stroke", Stroke);
   NODE_SET_PROTOTYPE_METHOD(t, "fillRect", FillRect);
@@ -125,6 +130,7 @@ Context2d::New(const Arguments &args) {
 Context2d::Context2d(Canvas *canvas): ObjectWrap() {
   _canvas = canvas;
   _context = cairo_create(canvas->getSurface());
+  cairo_set_line_width(_context, 1);
   RGBA(fill,0,0,0,1);
   RGBA(stroke,0,0,0,1);
 }
@@ -306,6 +312,30 @@ Context2d::BezierCurveTo(const Arguments &args) {
   return Undefined();
 }
 
+/*
+ * Save state.
+ */
+
+Handle<Value>
+Context2d::Save(const Arguments &args) {
+  HandleScope scope;
+  Context2d *context = ObjectWrap::Unwrap<Context2d>(args.This());
+  cairo_save(context->getContext());
+  return Undefined();
+}
+
+/*
+ * Restore state.
+ */
+
+Handle<Value>
+Context2d::Restore(const Arguments &args) {
+  HandleScope scope;
+  Context2d *context = ObjectWrap::Unwrap<Context2d>(args.This());
+  cairo_restore(context->getContext());
+  return Undefined();
+}
+
 /*
  * Creates a new subpath.
  */
@@ -330,6 +360,47 @@ Context2d::ClosePath(const Arguments &args) {
   return Undefined();
 }
 
+/*
+ * Rotate transformation.
+ */
+
+Handle<Value>
+Context2d::Rotate(const Arguments &args) {
+  HandleScope scope;
+  Context2d *context = ObjectWrap::Unwrap<Context2d>(args.This());
+  cairo_rotate(context->getContext()
+    , args[0]->IsNumber() ? args[0]->NumberValue() : 0);
+  return Undefined();
+}
+
+/*
+ * Translate transformation.
+ */
+
+Handle<Value>
+Context2d::Translate(const Arguments &args) {
+  HandleScope scope;
+  Context2d *context = ObjectWrap::Unwrap<Context2d>(args.This());
+  cairo_translate(context->getContext()
+    , args[0]->IsNumber() ? args[0]->NumberValue() : 0
+    , args[1]->IsNumber() ? args[1]->NumberValue() : 0);
+  return Undefined();
+}
+
+/*
+ * Scale transformation.
+ */
+
+Handle<Value>
+Context2d::Scale(const Arguments &args) {
+  HandleScope scope;
+  Context2d *context = ObjectWrap::Unwrap<Context2d>(args.This());
+  cairo_scale(context->getContext()
+    , args[0]->IsNumber() ? args[0]->NumberValue() : 0
+    , args[1]->IsNumber() ? args[1]->NumberValue() : 0);
+  return Undefined();
+}
+
 /*
  * Fill the shape.
  */

src/context2d.h

@@ -21,6 +21,11 @@ class Context2d: public node::ObjectWrap {
     rgba_t stroke;
     static void Initialize(Handle<Object> target);
     static Handle<Value> New(const Arguments &args);
+    static Handle<Value> Save(const Arguments &args);
+    static Handle<Value> Restore(const Arguments &args);
+    static Handle<Value> Rotate(const Arguments &args);
+    static Handle<Value> Translate(const Arguments &args);
+    static Handle<Value> Scale(const Arguments &args);
     static Handle<Value> BeginPath(const Arguments &args);
     static Handle<Value> ClosePath(const Arguments &args);
     static Handle<Value> Fill(const Arguments &args);

test/canvas.test.js

@@ -67,7 +67,7 @@ module.exports = {
     assert.equal(null, new Canvas(200, 300).getContext('invalid'));
   },
   
-  'test Canvas#clearRect()': function(assert){
+  'test Context2d#clearRect()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/clearRect.png';
@@ -80,10 +80,10 @@ module.exports = {
         canvas
       , path
       , 'e21404e97142a76c0c8d14cf0fab400f'
-      , 'Canvas#clearRect() failed');
+      , 'Context2d#clearRect() failed');
   },
   
-  'test Canvas#strokeRect()': function(assert){
+  'test Context2d#strokeRect()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/strokeRect.png';
@@ -95,11 +95,11 @@ module.exports = {
     assertChecksum(
         canvas
       , path
-      , '1cd349f7d3d2ae5a2bce13ca35dcaa94'
+      , '130c5457e19da9d35b46970c2c3e035f'
-      , 'Canvas#strokeRect() failed');
+      , 'Context2d#strokeRect() failed');
   },
   
-  'test Canvas#lineTo()': function(assert){
+  'test Context2d#lineTo()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/lineTo.png';
@@ -122,12 +122,12 @@ module.exports = {
     assertChecksum(
         canvas
       , path
-      , '44cce447dcb15918c9baf9170f87911f'
+      , '3d500105083716f798cf3de3ef6a4a56'
-      , 'Canvas#lineTo() failed'
+      , 'Context2d#lineTo() failed'
       );
   },
   
-  'test Canvas#arc()': function(assert){
+  'test Context2d#arc()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/arc.png';
@@ -145,11 +145,11 @@ module.exports = {
     assertChecksum(
         canvas
       , path
-      , '3c48a221b24c582f46e39c16678b12dd'
+      , '82997bc57c3941afea72ba571d713160'
-      , 'Canvas#arc() failed');
+      , 'Context2d#arc() failed');
   },
   
-  'test Canvas#bezierCurveTo()': function(assert){
+  'test Context2d#bezierCurveTo()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/bezierCurveTo.png';
@@ -168,7 +168,24 @@ module.exports = {
         canvas
       , path
       , '5626a53780d77aecc490ec807ee0bc63'
-      , 'Canvas#bezierCurveTo() failed');
+      , 'Context2d#bezierCurveTo() failed');
+  },
+  
+  'test Context2d#rotate()': function(assert){
+    var canvas = new Canvas(200, 200)
+      , ctx = canvas.getContext('2d')
+      , path = __dirname + '/rotate.png';
+    
+    ctx.rotate(0.4);
+    ctx.translate(30,0);
+    ctx.rect(0,0,50,50);
+    ctx.stroke();
+    
+    assertChecksum(
+        canvas
+      , path
+      , 'b364d4572f8b4fe03e1290235dcf2e55'
+      , 'Context2d#rotate() failed');
   },
   
   'test fill with stroke': function(assert){
@@ -190,11 +207,11 @@ module.exports = {
     assertChecksum(
         canvas
       , path
-      , '0437605377cc9840c58cb166fb0b89d4'
+      , '603b1e1c8a4bc0048c9a0944c83e82f4'
       , 'fill with stroke failed');
   },
   
-  'test Canvas#rect()': function(assert){
+  'test Context2d#rect()': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/rect.png';
@@ -207,11 +224,11 @@ module.exports = {
     assertChecksum(
         canvas
       , path
-      , '2909bb99d128e3ea1ee839b73dc1a0ed'
+      , 'a670979e566eafa07e3938aec9e2b7a3'
-      , 'Canvas#rect() failed');
+      , 'Context2d#rect() failed');
   },
   
-  'test Canvas#fillStyle=': function(assert){
+  'test Context2d#fillStyle=': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/fillStyle.png';
@@ -232,10 +249,10 @@ module.exports = {
         canvas
       , path
       , '01632d060ba4702a53862a955382d30d'
-      , 'Canvas#fillStyle= failed');
+      , 'Context2d#fillStyle= failed');
   },
   
-  'test Canvas#lineWidth=': function(assert){
+  'test Context2d#lineWidth=': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/lineWidth.png';
@@ -252,10 +269,10 @@ module.exports = {
         canvas
       , path
       , '0bc6f64d58f326ca7ad3ade4426fb90f'
-      , 'Canvas#lineWidth= failed');
+      , 'Context2d#lineWidth= failed');
   },
   
-  'test Canvas#lineCap=': function(assert){
+  'test Context2d#lineCap=': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/lineCap.png';
@@ -273,10 +290,10 @@ module.exports = {
         canvas
       , path
       , 'd5b84ea10a3e6df723b702a32329ed43'
-      , 'Canvas#lineCap= failed');
+      , 'Context2d#lineCap= failed');
   },
   
-  'test Canvas#lineJoin=': function(assert){
+  'test Context2d#lineJoin=': function(assert){
     var canvas = new Canvas(200, 200)
       , ctx = canvas.getContext('2d')
       , path = __dirname + '/lineJoin.png';
@@ -294,6 +311,6 @@ module.exports = {
         canvas
       , path
       , 'bf97d882a0e99595109fb4f564fa41bf'
-      , 'Canvas#lineJoin= failed');
+      , 'Context2d#lineJoin= failed');
   }
 }