There are very little people helping in CS JavaScript HTML Canvas Leak
The rotate command is leaking into the later code. Also, the triangles move when they rotate. This should not be happening. Thanks, wwb00. var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); function drawRays(a,b,c,d,e){ var numberOfRays = 8; for(i=0;i<(8);i++){ ctx.beginPath(); ctx.strokeStyle = e; ctx.rotate((((360/numberOfRays)-numberOfRays)*i)*Math.PI/180); ctx.rect(a,b,c,d); ctx.stroke(); ctx.fillStyle = e; ctx.fill(); ctx.closePath(); } } drawRays(215,148.875,50,0.5,"#ffd633");
I will post the HTML for testing purposes.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>Canvas</title> <style>#mycanvas {border: 1px solid #000;} </style> </head> <body> <div class="menubar"> <p><a href="landing.html" class="formatting">Home</a></p> <p><a href="rectangle.html" class="formatting">Rectangle</a></p> <p><a href="circle.html" class="formatting">Circle</a></p> </div> <h1 class="custom">Canvas Practice</h1> <article class="textbox"> <h1>House</h1> <canvas id="mycanvas" width=1000 height=600> <p> Your browser does not support the canvas app</p> </canvas> </article> <script src="functions.js"></script> <script src="house.js"></script> </body> </html>
Join our real-time social learning platform and learn together with your friends!