Draw a semi-transparent white circle on a canvas.

by sjpt

HTML

test
<canvas width="100" height="100" id="myCanvas"></canvas>  
this

CSS

head, body, canvas { width: 100%; height:100%}
canvas {width: 55%; height:55%; background-color: white; opacity: 1;}

JavaScript

var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 7;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = '#00000000';
  context.fill();

  context.beginPath();
  context.arc(centerX*1.3, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = '#0fffff80';
  context.fill();