Hello, Now that I’ve retired I’m relearning basic Javascript after an interval of around 10 years.
I’ve got a simple script using HTML canvas which creates random angles between 2 straight lines and an arc between them:
<!DOCTYPE HTML>
<HTML>
<BODY>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000"></canvas>
<SCRIPT>
canvas = document.getElementById("myCanvas");
//console.log(typeof canvas);
ctx = canvas.getContext("2d");
ctx.translate(100,100)
ctx.strokeStyle = "#0000FF";
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();
let degrees = Math.floor(Math.random() * 35) * 5;
let radians = degrees * (Math.PI/180);
console.log("degrees: " + degrees);
console.log("radians: " + radians);
ctx.rotate(-radians); // rotate the drawing surface
ctx.strokeStyle = "#0000FF";
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke(); // and draw a line at that rotation
ctx.rotate(radians); // then rotate the drawing surface back to its original position
ctx.beginPath(0,0);
ctx.arc(0,0,30,0,-radians,true);
ctx.stroke();
ctx.translate(-100,-100);
</SCRIPT>
</BODY>
</HTML>
I then added an HTML button and a function, altogether 4 lines of code. Then the Firefox debugger freezes. The attached pictures show the debugger functioning before the additional lines, then failing after they’ve been added. What could cause this problem? I’m using Notepad++ and wondered if that could be an issue… The freeze in the debugger happens when I refresh the page.
<!DOCTYPE HTML>
<HTML>
<BODY>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000"></canvas>
<!-- ///////BUTTON ADDED HERE /////// -->
<button onclick="show()">Show it</button>
<P id="answer"></P>
<SCRIPT>
canvas = document.getElementById("myCanvas");
//console.log(typeof canvas);
ctx = canvas.getContext("2d");
ctx.translate(100,100)
ctx.strokeStyle = "#0000FF";
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke();
let degrees = Math.floor(Math.random() * 35) * 5;
let radians = degrees * (Math.PI/180);
console.log("degrees: " + degrees);
console.log("radians: " + radians);
//////////
function show(){
let dummy = "loren";
} /////////
ctx.rotate(-radians); // rotate the drawing surface
ctx.strokeStyle = "#0000FF";
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.stroke(); // and draw a line at that rotation
ctx.rotate(radians); // then rotate the drawing surface back to its original position
ctx.beginPath(0,0);
ctx.arc(0,0,30,0,-radians,true);
ctx.stroke();
console.log(degrees);
ctx.translate(-100,-100);
</SCRIPT>
</BODY>
</HTML>
Thanks very much for any help,
Gerard
