The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script src="bonsai.js" type="text/javascript"></script> -->
<script src="http://cloud.github.com/downloads/uxebu/bonsai/bonsai-0.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<title> Testing </title>
</head>
<body>
<div id="test"></div>
<script>
bonsai.run(document.getElementById('test'),{
url: 'main.js',
width: 1260,
height: 680
});
</script>
</body>
</html>
The js (main.js): //Globals
var screenWidth = 1260;
var screenHeight = 680;
var background = new Rect(0, 0, screenWidth, screenHeight).fill('#d3d3d3').addTo(stage);
window.setInterval(function(){
console.log('hi');
}, 100);
Any help would be greatly appreciated :) I'm not really sure what could be going wrong here. It looks like the docs.
You're getting this error because when you are loading the
main.js
file via the script tag,Rect
is not defined. You can delete the following line:Alternately, you can change your use of bonsai api to
code
: