title: Plain Javascript not Working in Angular CLI Component
body: <p>I'm developing a web using Angular CLI.
  I'm trying to applying similar things like this : </p>
  
  <p><a href="https://codepen.io/chrisdoble/pen/WQLLVp" rel="nofollow noreferrer">https://codepen.io/chrisdoble/pen/WQLLVp</a></p>
  
  <p>Is there any way to write plain javascript in component.ts. </p>
  
  <p>Here is my JS :</p>
  
  <pre><code>    var image = document.getElementById('hero-bg');
      var imageCanvas = document.createElement('canvas');
      var imageCanvasContext = imageCanvas.getContext('2d');
      var lineCanvas = document.createElement('canvas');
      var lineCanvasContext = lineCanvas.getContext('2d');
      var pointLifetime = 1000;
      var points = [];
      var newImage = document.getElementById('hero')
  
      if (image.complete) {
          start();
      } else {
          image.onload = start;
      }
  
      function start() {
          document.addEventListener('mousemove', onMouseMove);
          window.addEventListener('resize', resizeCanvases);
          newImage.appendChild(imageCanvas);
          resizeCanvases();
          tick();
      }
  
      function onMouseMove(event) {
          points.push({
              time: Date.now(),
              x: event.clientX,
              y: event.clientY
          });
      }
  
      function resizeCanvases() {
          imageCanvas.width = lineCanvas.width = window.innerWidth;
          imageCanvas.height = lineCanvas.height = window.innerHeight;
      }
  
      function tick() {
          // Remove old points
          points = points.filter(function(point) {
              var age = Date.now() - point.time;
              return age &lt; pointLifetime;
          });
  
          drawLineCanvas();
          drawImageCanvas();
          requestAnimationFrame(tick);
      }
      function drawLineCanvas() {
          var minimumLineWidth = 25;
          var maximumLineWidth = 100;
          var lineWidthRange = maximumLineWidth - minimumLineWidth;
          var maximumSpeed = 50;
  
          lineCanvasContext.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
          lineCanvasContext.lineCap = 'round';
          lineCanvasContext.shadowBlur = 30;
          lineCanvasContext.shadowColor = '#000';
  
          for (var i = 1; i &lt; points.length; i++) {
              var point = points[i];
              var previousPoint = points[i - 1];
  
              // Change line width based on speed
              var distance = getDistanceBetween(point, previousPoint);
              var speed = Math.max(0, Math.min(maximumSpeed, distance));
              var percentageLineWidth = (maximumSpeed - speed) / maximumSpeed;
              lineCanvasContext.lineWidth = minimumLineWidth + percentageLineWidth * lineWidthRange;
  
              // Fade points as they age
              var age = Date.now() - point.time;
              var opacity = (pointLifetime - age) / pointLifetime;
              lineCanvasContext.strokeStyle = 'rgba(0, 0, 0, ' + opacity + ')';
  
              lineCanvasContext.beginPath();
              lineCanvasContext.moveTo(previousPoint.x, previousPoint.y);
              lineCanvasContext.lineTo(point.x, point.y);
              lineCanvasContext.stroke();
          }
      }
  
      function getDistanceBetween(a, b) {
          return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
      }
  
      function drawImageCanvas() {
          // Emulate background-size: cover
          var width = imageCanvas.width;
          var height = imageCanvas.width / image.naturalWidth * image.naturalHeight;
  
          if (height &lt; imageCanvas.height) {
              width = imageCanvas.height / image.naturalHeight * image.naturalWidth;
              height = imageCanvas.height;
          }
  
          imageCanvasContext.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
          imageCanvasContext.globalCompositeOperation = 'source-over';
          imageCanvasContext.drawImage(image, 0, 0, width, height);
          imageCanvasContext.globalCompositeOperation = 'destination-in';
          imageCanvasContext.drawImage(lineCanvas, 0, 0);
      }
  </code></pre>
  
  <p>And here is my Component</p>
  
  <pre><code>import { Component } from '@angular/core';
  import * as $ from 'jquery';
  
  @Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.scss']
  })
  export class HeroComponent {
  
  
  }
  </code></pre>
  
  <p>The Error i got is this :</p>
  
  <ul>
  <li>message: 'Property 'complete' does not exist on type 'HTMLElement'.'</li>
  <li>message: 'Property 'naturalWidth' does not exist on type 'HTMLElement'.'</li>
  <li>message: 'Property 'naturalHeight' does not exist on type 'HTMLElement'.'</li>
  <li>message: 'Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | ImageBitmap'.
  Type 'HTMLElement' is not assignable to type 'ImageBitmap'.
  Property 'width' is missing in type 'HTMLElement'.'</li>
  </ul>
  
  <p>Everything works fine if i put the code inline at Index.html file,
  but i don't want to put it there, i want to apply it in my component.</p>
  
  <p>Please, help me to find a way to implement this plain Javascript in my <strong>component.ts</strong>.
  Or maybe if there are any Typescript master here, kindly recode for me. hehehe
  Thank You guys alot.</p>