Paper.js – compatibilty with Chrome and IE

I’m trying to do a silly thing : a flying sausage on a HTML page.
I’m trying to do it from Paper.js

here is the HTML code

<!DOCTYPE html>

 <meta charset="utf-8" />

<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper.js">
<!--Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="saucisse.js" canvas="myCanvas">


 <canvas  id="myCanvas" width="1600" height="900"
    id="tools_sketch" width="1600" height="900" 
    style="background: url(sky.jpg) no-repeat center center;">


and here is the saucisse.js

// Adapted from the following Processing example:

// The amount of points in the path:
var points = 10;

// The distance between the points:
var length = 25;

var path = new Path({
 strokeColor: '#E4141B',
 strokeWidth: 70,
 strokeCap: 'round'

var start = / [10, 1];
for (var i = 0; i < points; i++)
 path.add(start + new Point(i * length, 0));

function onMouseMove(event) {
 path.firstSegment.point = event.point;
 for (var i = 0; i < points - 1; i++) {
  var segment = path.segments[i];
  var nextSegment =;
  var vector = segment.point - nextSegment.point;
  vector.length = length;
  nextSegment.point = segment.point - vector;

function onMouseDown(event) {
 path.fullySelected = true;
 path.strokeColor = '#e08285';

function onMouseUp(event) {
 path.fullySelected = false;
 path.strokeColor = '#e4141b';


sky.jpg, paper.js, saucisse.js and saucisse.html are in the same folder

Everything is fine with Firefox but with Chrome and IE, there is only the sky, and no sausage. Very sad.

Any idea ?

Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.