Paper.js Rasterize Layer Fails

Question

I'm using Paper.js to do drawing on images, adding text, etc. I then need to take all of the sketching on the image and send it all back to a server. Specifically, I'm having trouble with paths rasterizing. I'm attempting to use

paper.project.layers[0].rasterize();

but when I do this on an image, I'm not getting the lines to rasterize. I end up with

data:,

instead of a base64 encoded image prefixed with something like "data:image/png;base64,". Here's a Paper.js sketch where I have this working. To use it, click a few times around the kitty to draw a few lines. Once you have two lines, a new window should open showing the rasterized image with the red lines you drew.

It works in the sketch, but not in my own code.

Here's my React class that manages the drawing:

var DrawingTools = React.createClass({
  componentDidUpdate: function() {
    // Initial path object, will be reset for new paths after Alt is released
    var path = this.newPath();

    // On mousedown add point to start from
    paper.project.layers[0].on('mousedown', function(event) {
      if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
        if(path.lastSegment == null) {
          path.add(event.point, event.point);
        } else {
          path.add(path.lastSegment.point, path.lastSegment.point)
        }
      }
    });

    // On mousedrag add points to path
      paper.project.layers[0].on('mousedrag', function(event) {
      if(event.event.altKey && !event.event.ctrlKey) { // Alt key to add a path, but disallow attempting to add text at the same time
        if(event.event.shiftKey) { // Use shift key for freeform
          path.add(event.point);
        } else { // Default of straight line added to path
          path.lastSegment.point = event.point;
        }
      }
    }.bind(this));

    // Each time Alt comes up, start a new path
    var tool = new paper.Tool();
    tool.onKeyUp = function(event) {
      if(event.key == "option") {
        path.onMouseEnter = this.props.movableEvents.showSelected;
        path.onMouseDrag = this.props.movableEvents.dragItem;
        path.onMouseLeave = this.props.movableEvents.hideSelected;

        // Start a new path
        path = this.newPath();
      }
    }.bind(this);
  },
  newPath: function() {
    var path = new paper.Path();
    path.strokeColor = 'black';
    path.strokeWidth = 10;
    return path;
  },
  render: function() {
    // Someday colors will go here, or thickness controls, etc.
    return (
      <div>
      </div>
    );
  }
});

module.exports = DrawingTools;

And here's the code that does the rasterization:

var layerAsRaster = paper.project.layers[0].rasterize(); // TODO flatten layers when have multiple layers // Layer to Paper.js Raster object
var dataString = layerAsRaster.toDataURL();
console.log(dataString);

So the rasterization works for adding PointTexts, but not for Paths. Why is this? What is wrong with my code as opposed to the sketch?

Answer 1

I think you are going about your problem wrong. Perhaps a better way would be to save the points the user clicks, and then send that data back to the server, you know they will always be forming straight lines. Optimizes network access a bit, too.