title: Getting "Cannot read property 'getContext' of null inside partial HTML
body: <p>I'm building a HTML5 color wheel in a canvas element. I'm using AngularJS to generate individual pages. With the source code for generating the canvas in a separate file, I thought I'd be fine, since the <code>index</code> of my HTML refers to it. Since that failed to work (getting the error above), I resorted to placing it inside a JavaScript file that acts as the controller for this HTML partial. I end up getting the exact same error.</p>
  
  <p>Here's the partial's AngularJS in question:</p>
  
  <pre><code>'use strict';
  
  angular.module('careApp.tMain', ['ngRoute'])
  
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/tMain', {
      templateUrl: './templates/tMain.html',
      controller: 'tMainCtrl'
    });
  }])
  
  .controller('tMainCtrl', function($scope, $http) {
        //Draw color wheel inside canvas
        var canvas = document.getElementById("picker");
        var context = canvas.getContext("2d");
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 100;
        var counterClockwise = false;
  
        for(var angle=0; angle&lt;=360; angle+=1){
          var startAngle = (angle-2)*Math.PI/180;
          var endAngle = angle * Math.PI/180;
          context.beginPath();
          context.moveTo(x, y);
          context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
          context.closePath();
          var gradient = context.createRadialGradient(x, y, 0, x, y, radius);
          gradient.addColorStop(0,'hsl('+angle+', 10%, 100%)');
          gradient.addColorStop(1,'hsl('+angle+', 100%, 50%)');
          context.fillStyle = gradient;
          context.fill();
        }
    $scope.dimmer = 100;
  });
  </code></pre>
  
  <p>For the HTML, all you need to know is that the partial has the following <code>canvas</code> element: </p>
  
  <pre><code>&lt;canvas id="picker" width="150" height="150"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><code>index.html</code> contains all of the external scripts and the main div that holds every partial inside it. The main application JS is also present, but it merely exists to load plugins and dependencies.</p>
  
  <p>Has this been set up incorrectly? Do I need to try a different approach?</p>