javascript - javascript で透明な円を生成する (クライアント側)

Question

このページに示すように、Google マップ API のマーカーにさまざまなサイズのアイコンを表示するルーチンを実装しています: https://developers.google.com/academy/apis/maps/visualizing/earthquakes (円の例を見てください) ):

window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var earthquake = results.features[i];
    var coords = earthquake.geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      icon: getCircle(earthquake.properties.mag)
    });
  }
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / Math.PI,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

クロムではすべて問題ありませんが、IE9 で実行すると、多くのマーカーで非常に遅くなります。アプリで IE9 を自動化しているため、IE9 である必要があります)。これは、IE9 が SVG で非常に遅く動作するためです。そのため、SVG で生成された円の代わりにアイコンを使用するという別のアプローチを試みています。そのためには、JS を使用してオンザフライで生成し (私のプロジェクトにはサーバー コードはありません)、円をディスクに保存してマーカーに割り当てる必要があります。

JS のみを使用して、円を透明な PNG として生成して保存するにはどうすればよいですか?