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
http://paperjs.org/

here is the HTML code

<!DOCTYPE html>
<html>
<head>

 <meta charset="utf-8" />
    <title>SkyWurst</title>

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

</head>
<body>

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

</body>
</html>

and here is the saucisse.js

// Adapted from the following Processing example:
// http://processing.org/learning/topics/follow3.html

// 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 = view.center / [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 = segment.next;
  var vector = segment.point - nextSegment.point;
  vector.length = length;
  nextSegment.point = segment.point - vector;
 }
 path.smooth();
}

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.