'Embed: Make an updating background transparent

I wrote up this embed here which takes weather info from the specified site as an embed, then duplicates it in hopes to change the alpha channel of the color white to transparent. I can't seem to come to a conclusion. The issue is the weather app updates every 1 or 2 seconds. So I would need a loop as well IF I can even get the background to be transparent, which I haven't had any luck with yet.

<!DOCTYPE html>
<html lang="eng">

<head>
  <meta charset="UTF-8">
  <meta nameset="viewport" content="with=device-width, initial-scale=1.0">
  <title>ClearOutside</title>

  <style type="text/css">
body {
  background-color: transparent;

  -ms-zoom: 0.5;
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.5);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 0 0;
}
  </style>
</head>

<body style="background-color:blue">
  <a href="https://clearoutside.com/forecast/37.61/15.10">
    <img id="forecast" src="https://clearoutside.com/forecast_image_small/33.07/-106.02/forecast.png" /></a>
  <canvas id="myCanvas" width="505" height="41">

<script>
  document.getElementById("forecast").onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("forecast");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
  };
</script>
</body>
</html>

Any help would be greatly appreciated!!

javascripthtmlcssiframe


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions