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!!