Skip to content

Instantly share code, notes, and snippets.

@gpiffault

gpiffault/canvas.html

Created November 28, 2014 10:20
Show Gist options
  • Save gpiffault/98b75dd0633b3b62c427 to your computer and use it in GitHub Desktop.
Save gpiffault/98b75dd0633b3b62c427 to your computer and use it in GitHub Desktop.
Download ZIP
Drawing semi-transparent blobs on canvas
Raw
canvas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
blob(ctx, 50, 50, 7);
blob(ctx, 52, 52, 7);
blob(ctx, 54, 54, 7);
function blob (ctx, x, y, r) {
var grd = ctx.createRadialGradient(x,y,0,x,y,r);
grd.addColorStop(0,"rgba(255,0,0,0.5)");
grd.addColorStop(1,"rgba(255,0,0,0)");
ctx.fillStyle = grd;
ctx.fillRect(x-r, y-r, 2*r, 2*r);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment