Q:

Why canvas is not working locally but working on TRYIT

I Have build some code related to canvas but code is working on TRYIT but code is not working locally when i have copied all code to file and tried to run it .
This is what this code is doing , it takes an image and set the width and height of canvas with respect to that image and draw a filled circle with text in it on that image(canvas). 
Here is code
      <head>
  <meta charset=utf-8 />
  <title>Draw a circle</title>
  </head>
  <body onload="draw();">
  <canvas   id="circle"></canvas>
  </body>
  <script>

  var canvas = document.getElementById('circle'),
  context = canvas.getContext('2d');

  function draw()
  {

  base_image = new Image();
  base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';

  var canvas = document.getElementById('circle');
  if (canvas.getContext)
  {
  base_image = new Image();
  base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
  var ctx = canvas.getContext('2d'); 
        ctx.beginPath();

  ctx.canvas.width  = base_image.width;
  ctx.canvas.height = base_image.height;
  var X = 500;
  var Y =  229;
  var R = 6.4;
  ctx.font = "15px Arial bold";
  ctx.beginPath();
  ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
  ctx.lineWidth = 12;
  ctx.strokeStyle = '#FF0000';
  ctx.drawImage(base_image, 0, 0)
  ctx.stroke();
  ctx.fillText("TT", X-9, Y+5);

  }
  }
  </script>

There are no errors on console , but it shows these warnings in console : 

A:

As @DBS mentioned, it was a speed thing. You weren't waiting for the image to load before working with it. 
The fix is to attach a listener to the load event of the image, either using image.addEventListener('load', () => { or the deprecated-but-still-works style of image.onload = () => {, which I have used below.
The reason that it works in the TryIt example is that the image is cached by the browser from the second load onwards, so it is available immediately and you don't need to wait for it to load.
I suspect that when you run it locally, if you have Devtools open, the cache is disabled due to an option in Devtools settings called "Disable cache (while DevTools is open)". So it will never be pulled from the cache, and thus never work.
The following code works:

<html>

<head>
  <meta charset=utf-8 />
  <title>Draw a circle</title>
</head>

<body onload="draw();">
  <canvas id="circle"></canvas>
</body>
<script>
  var canvas = document.getElementById('circle'),
    context = canvas.getContext('2d');

  function draw() {

    base_image = new Image();
    base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';


    var canvas = document.getElementById('circle');
    if (canvas.getContext) {
      base_image = new Image();
      base_image.src = 'http://sst-system.com/old/Planos/C21E34.JPG';
      // The key change: put the rest of the code inside the onload callback
      // to wait for the image to load before using it.
      base_image.onload = function() {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();

        ctx.canvas.width = base_image.width;
        ctx.canvas.height = base_image.height;
        var X = 500;
        var Y = 229;
        var R = 6.4;
        ctx.font = "15px Arial bold";
        ctx.beginPath();
        ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
        ctx.lineWidth = 12;
        ctx.strokeStyle = '#FF0000';
        ctx.drawImage(base_image, 0, 0)
        ctx.stroke();
        ctx.fillText("TT", X - 9, Y + 5);
      };

    }
  }
</script>

</html>

