UPDATE the problem has been solved by making the colorChange function global
I am attempting to modify the color of the path when the 'Red' button is clicked using the colorChange function. Despite my efforts, I keep getting an error stating that 'Function 'colorChange' is not defined'. The internal paper js functions like path() are functioning fine, but my custom function isn't working as expected.
<head>
<!-- Include the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Include external PaperScript and link it with myCanvas -->
<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script>
<!-- CSS Styling -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<button onClick='colorChange(id)' id='red'>Red</button> // Implementation
<canvas id="myCanvas" resize="true"></canvas>
</body>
Below is myScript.js for canvas ID='myCanvas' :
var myPath={};
var colorChange=function(id){ // This function causing issues
myPath=new Path();
myPath.strokeColor=id;
}
function onMouseDown(event){ // However, this function works correctly
myPath=new Path();
myPath.add(event.point);
}