title: Mapbox GL JS : How to add a canvas, and get data from it? (Weather Map)
body: <p>I have 2 issues that seem to go hand in hand, and I am trying my best to understand them after much research.</p>
  
  <p>I do not understand how to add a canvas to my map. I am sure this must be simple, but I cannot find a basic working example. I have also done research on the API : <a href="https://www.mapbox.com/mapbox-gl-js/api/#canvassource" rel="nofollow noreferrer">https://www.mapbox.com/mapbox-gl-js/api/#canvassource</a> - but it does not seem to work like an image overlay does.</p>
  
  <p>The API link above shows how to add a canvas source but not how to display it on the map. Am I missing where they show the example or is it just not there? (I will add an example of how an image source I use works). This is the first thing I would like to do.</p>
  
  <p>In my project, I am displaying weather radar data. Once I have a canvas source working and displaying - I would like to have the data value displayed as the user hovers the mouse over the data as a tooltip following the cursor (The data is rain -I will attach an example screenshot). For each color of the canvas, I know already the exact value of the pixel (example : <code>#63C2FF = 15.4</code>, <code>#469B00 = 23.4</code>, <code>#FDF900 = 31.5</code>, etc) - So that is no issue.</p>
  
  <p>Is this possible to do in MapBox GL JS? From what I read online, it is possible only using a canvas. There appears to be ways to get data from the image as listed in the MapBox API, but again I have no examples to look at. If I even had working code of a <code>10px</code> by <code>10px</code> image with only 2 colors, I could figure out the rest. I have many other things I need to do (like refreshing the image, etc) but I understand how to do all that now.</p>
  
  <p>Below is <em>working</em> and correct code for an image overlay that I am using, and If I am right, does the canvas work in a similar way?</p>
  
  <pre><code>map.on('load', function() {
    map.addSource("source_KEWX_L2_REFLECTIVITY", {
      "type": "image",
      "url": "images/KEWX_L2_REFLECTIVITY.gif",
      "coordinates": [
        [-103.009641, 33.911],
        [-94.009641, 33.911],
        [-94.009641, 24.911],
        [-103.009641, 24.911]
      ]
    })
    map.addLayer({
      "id": "overlay_KEWX_L2_REFLECTIVITY",
      "source": "source_KEWX_L2_REFLECTIVITY",
      "type": "raster",
      "raster-opacity": 0.5,
      "layout": {
        "visibility": "none"
      },
    })
  });
  </code></pre>
  
  <p>And lastly, the example image of how I would like to eventually get this to work:</p>
  
  <p><a href="https://i.stack.imgur.com/LalFU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LalFU.jpg" alt="canvas"></a></p>