How is it possible to combine rafael.js and paper.js in one html?

While I was trying to use two libraries (rafael.js and paper.js) in one html page, I got various errors.

Case 1. Uncaught ReferenceError: Raphael is not defined. In the file "rafael.js", the line:

var paper = Raphael(0, 0, 320, 200);

was the reason of the error. But obviously it is imported in html:

<head>
...
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<script src="js/rafael.js" type="text/javascript"></script>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

Case 2. paper.js output: Uncaught Error: Unable to find canvas with id "myCanvas", but the canvas is there. Here is html:

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/mypaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafael.js"></script>
...
</body>

The same error also happened when I had rafael and paper code in one .js file ("myrafaelpaper.js") despite the fact that myCanvas is there:

<head>
...
<script src="js/rafael.js" type="text/javascript"></script>
<script src="js/paper-full.js" type="text/javascript"></script>
<script src="js/myrafaelpaper.js" type="text/paperscript" canvas="myCanvas">
</head>
<body>
<canvas id='myCanvas' resize></canvas>
<script src="js/myrafaelpaper.js"></script>
...
</body>

Separately, they work fine.

"myrafaelpaper.js" is here:

//rafael.js part
var paper = Raphael(0, 0, 320, 200);
var circle = paper.circle(0, 30, 50);
circle.attr("fill", "#f00");
console.log(circle.isPointInside(50, 30));

//paper.js part
var pathData = 'M100,50c0,27.614-22.386,50-50,50S0,77.614,0,50S22.386,0,50,0S100,22.386,100,50';
var path = new Path(pathData);
path.strokeColor = 'red';
path.strokeWidth = 5;
path.position+= new Point(100, 50);
path.segments[3].point.selected=true;

The content of "myrafael.js" and "mypaper.js" are analogical.

Solution

In all of the cases you've mentioned, the script-tag for myrafaelpaper.js is not closed (</script>).