made a graded background color (translucent), but the display is inconsistent on Firefox and Chrome. Am I missing something?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body{background: -sharp000;}
</style>
</head>
<body>
<div style="padding: 50px;">
<canvas id="myCanvas" width="400px" height="200px"></canvas>
</div>
<script type="text/javascript">
drawCnvas(document.getElementById("myCanvas"));
function drawCnvas(obj){
var ctx = obj.getContext("2d");
var ht = obj.height;
var wt = obj.width;
var my_gradient = ctx.createLinearGradient(0,0,0,ht);
my_gradient.addColorStop(0,"rgba(0, 255, 255, 0.5)");
my_gradient.addColorStop(1,"rgba(0,0,0,0)");
ctx.fillStyle = my_gradient;
ctx.fillRect(0,0,wt,ht);
}
</script>
</body>
</html> Firefox version 61.0.1
Chrome version 67.0.3396.99
