Why doesn't the code that, according to the MDN article, should create a beautiful frame, work?

F

fapchat2020-03-25 13:16:32

JavaScript

fapchat, 2020-03-25 13:16:32

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas class="myCanvas">
      <p>Add suitable fallback here.</p>
    </canvas>

    <script>

      const canvas = document.querySelector('.myCanvas');
      const width = canvas.width = window.innerWidth;
      const height = canvas.height = window.innerHeight;
      const ctx = canvas.getContext('2d');

      ctx.fillStyle = 'rgb(0,0,0)';
      ctx.fillRect(0,0,width,height);

ctx.translate(width/2, height/2);

function degToRad(degrees) {
  return degrees * Math.PI / 180;
};
 

const length = 250;
const moveOffset = 20;

for(var i = 0; i < length; i++) {
ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
ctx.beginPath();
ctx.moveTo(moveOffset, moveOffset);
ctx.lineTo(moveOffset+length, moveOffset);
let triHeight = length/2 * Math.tan(degToRad(60));
ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
ctx.lineTo(moveOffset, moveOffset);
ctx.fill();

length--;
moveOffset += 0.7;
ctx.rotate(degToRad(5));
}
    </script>
  </body>
</html>

This is how it should work, but in my google and firefox - just a black screen

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

twobomb, 2020-03-25
@fapchat

Change

const length = 250;
const moveOffset = 20;

on the

var length = 250;
var moveOffset = 20;

Constants for that and constants so that they cannot be changed