-1

https://codepen.io/deathshadow8123/pen/KKNaLXq That is my pen from codepen, however when I create an html doc, and put the js into a tag and the css into a tag it doesn't show up on the webpage I also put the in there. Pls help me I do not know how to make this work. Any ideas? if you can't access codepen here is my code:

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    opts = {
      
      chars: '\1234567890ìqwertyuiopè+asdfghjklòàù<zxcvbnm,.-|!"£$%&/()=?^QWERTYUIOPé*ASDFGHJKLç°§>ZXCVBNM;:_[]@#€{}'.split(''), // every key in the italian keyboard layout. It sucks, we don't even have a backtick!
      font: '12px monospace',
      charSize: 14,
      lineHeight: 14,
      
      hueSpeed: 1,
      repaintAlpha: .1,
      
      stripesParXxY: .1,
      stripeSpeed: .5,
      beforeSpawning: 50
    },
    
    tick = 0,
    endX = ( w / opts.charSize + 1 ) |0,
    endY = ( h / opts.lineHeight + 1 ) |0,    
    sum = w + h,
    stripes = [];

ctx.font = opts.font;
ctx.fillStyle = '#111';
ctx.fillRect( 0, 0, w, h );

function loop() {
  
  window.requestAnimationFrame( loop );
  
  tick += opts.hueSpeed;
  
  ctx.fillStyle = 'rgba(0,0,0,alp)'.replace( 'alp', opts.repaintAlpha );
  ctx.fillRect( 0, 0, w, h );
  
  stripes.map( function( stripe ){ stripe.step(); } );
}

function Stripe(){
  
  this.reset();
}
Stripe.prototype.reset = function() {
  
  this.x = ( Math.random() * endX ) |0;
  this.y = -Math.random() * opts.beforeSpawning;
}
Stripe.prototype.step = function() {
  
  this.y += opts.stripeSpeed;
  
  drawLetter( this.x, this.y|0 );
  
  if( this.y > endX )
    this.reset();
}

function drawLetter( x, y ){
  
  x *= opts.charSize;
  y *= opts.lineHeight;
  
  ctx.fillStyle = 'hsl(hue,80%,50%)'.replace( 'hue', ( x + y ) / sum * 360 + tick );
  ctx.fillText( opts.chars[ ( Math.random() * opts.chars.length ) |0 ], x, y );
}

for( var i = 0; i < endX*endX * opts.stripesParXxY; ++i )
  stripes.push( new Stripe );

loop();

window.addEventListener( 'resize', function(){
  
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  ctx.fillStyle = '#111';
  ctx.fillRect( 0, 0, w, h );
  ctx.font = opts.font;
  
  endX = ( w / opts.charSize + 1 ) |0;
  endY = ( h / opts.lineHeight + 1 ) |0;  
  sum = w + h;
  
  stripes.length = 0;
  for( var i = 0; i < endX*endY * opts.stripesParXxY; ++i )
    stripes.push( new Stripe );
})
canvas {
  
  position: absolute;
  top: 0;
  left: 0;
}
<canvas id=c></canvas>
Wyatt
  • 21
  • 5

2 Answers2

0

Once the DOM is loaded, you need to get a reference to your canvas DOM element at the top of your script or load handler function.

const c = document.getElementById("c");

Also its best to use quotes in your html.

e.g.

<canvas id="c"></canvas>
Paul Rooney
  • 20,879
  • 9
  • 40
  • 61
0

The problem of your code is that you have not put your canvas' id inside "", putting t I have seen the code. There is a small error in html file and this is the cause of the project not working. It is simple, Just put your canvas id in "" doublequotes.

<canvas id="c"></canvas>

Thanks, Hope it helps

Savio Martin
  • 81
  • 1
  • 3