Update canvas drawing algorithm with larger icon. Fix #803.

omega-target-chromium-extension/background.coffee

@@ -28,21 +28,26 @@ Promise.onUnhandledRejectionHandled (promise) ->
   unhandledPromisesId.splice(index, 1)
 
 iconCache = {}
+drawContext = null
 drawIcon = (resultColor, profileColor) ->
   cacheKey = "omega+#{resultColor ? ''}+#{profileColor}"
   icon = iconCache[cacheKey]
   return icon if icon
-  ctx = document.getElementById('canvas-icon').getContext('2d')
+  if not drawContext?
-  ctx2x = document.getElementById('canvas-icon-2x').getContext('2d')
+    drawContext =
+      19: document.getElementById('canvas-icon').getContext('2d')
+      38: document.getElementById('canvas-icon-2x').getContext('2d')
+    for own size, ctx of drawContext
+      ctx.scale(size * 1, size * 1)
+
+  icon = {}
+  for own size, ctx of drawContext
     if resultColor?
       drawOmega ctx, resultColor, profileColor
-    drawOmega2x ctx2x, resultColor, profileColor
     else
       drawOmega ctx, profileColor
-    drawOmega2x ctx2x, profileColor
+    icon[size] = ctx.getImageData(0, 0, size * 1, size * 1)
-  icon =
+
-    19: ctx.getImageData(0, 0, 19, 19)
-    38: ctx2x.getImageData(0, 0, 38, 38)
   return iconCache[cacheKey] = icon
 
 charCodeUnderscore = '_'.charCodeAt(0)

omega-target-chromium-extension/overlay/background.html

@@ -13,8 +13,7 @@
   <script src="js/omega_pac.min.js"></script>
   <script src="js/omega_target.min.js"></script>
   <script src="js/omega_target_chromium_extension.min.js"></script>
-  <script src="img/icons/omega_svg.js"></script>
+  <script src="img/icons/draw_omega.js"></script>
-  <script src="img/icons/omega-2x_svg.js"></script>
   <script src="js/background.js"></script>
 </body>
 </html>

omega-web/img/icons/draw_omega.js

@@ -0,0 +1,19 @@
+var drawOmega = function (ctx, outerCircleColor, innerCircleColor) {
+  ctx.globalCompositeOperation = "source-over";
+  ctx.fillStyle = outerCircleColor;
+  ctx.beginPath();
+  ctx.arc(0.5, 0.5, 0.5, 0, Math.PI * 2, true);
+  ctx.closePath();
+  ctx.fill();
+
+  if (innerCircleColor != null) {
+    ctx.fillStyle = innerCircleColor;
+  } else {
+    ctx.globalCompositeOperation = "destination-out";
+  }
+
+  ctx.beginPath();
+  ctx.arc(0.5, 0.5, 0.25, 0, Math.PI * 2, true);
+  ctx.closePath();
+  ctx.fill();
+};

omega-web/img/icons/omega-128.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="128"
+   height="128"
+   version="1.1">
+  <path
+     d="M 64 64 m -56 0 a 56 56 0 1 0 112 0 a 56 56 0 1 0 -112 0 M 64 64 m -28 0 a 28 28 0 1 0 56 0 a 28 28 0 1 0 -56 0"
+     fill-rule="evenodd"
+     fill="#31afec"
+     stroke="none" />
+</svg>

omega-web/img/icons/omega-2x.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-   xmlns="http://www.w3.org/2000/svg"
-   width="38"
-   height="38"
-   version="1.1">
-  <path
-     d="m 28.091374,19.0002 c 0,4.909654 -4.070348,8.889716 -9.091374,8.889716 -5.021027,0 -9.0913735,-3.980062 -9.0913735,-8.889716 0,-4.909654 4.0703465,-8.889716 9.0913735,-8.889716 5.021026,0 9.091374,3.980062 9.091374,8.889716 z M 36.077892,19 C 36.077892,28.222652 28.431858,35.699084 19,35.699084 9.5681407,35.699084 1.922108,28.22265 1.922108,19 1.922108,9.77735 9.5681407,2.300916 19,2.300916 28.431858,2.300916 36.077892,9.77735 36.077892,19 z"
-     fill-rule="evenodd"
-     class="profile-color"
-     fill="#31afec"
-     stroke="none"
-     id="profile-circle" />
-</svg>

omega-web/img/icons/omega-2x_svg.js

@@ -1,34 +0,0 @@
-var drawOmega2x = function (ctx, outerCircleColor, innerCircleColor) {
-  ctx.clearRect(0,0,38,38);
-
-  ctx.lineCap = 'butt';
-  ctx.lineJoin = 'miter';
-  ctx.miterLimit = 4;
-
-  if (innerCircleColor != null) {
-    ctx.fillStyle = innerCircleColor;
-    ctx.moveTo(36.077892,19);
-    ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084);
-    ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19);
-    ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916);
-    ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19);
-    ctx.closePath();
-    ctx.fill();
-  }
-
-  ctx.fillStyle = outerCircleColor;
-  ctx.beginPath();
-  ctx.moveTo(28.091374,19.0002);
-  ctx.bezierCurveTo(28.091374,23.909854,24.021026,27.889916,19,27.889916);
-  ctx.bezierCurveTo(13.978973,27.889916,9.9086265,23.909854,9.9086265,19.0002);
-  ctx.bezierCurveTo(9.9086265,14.090546,13.978973,10.110484,19,10.110484);
-  ctx.bezierCurveTo(24.021026,10.110484,28.091374000000002,14.090546,28.091374000000002,19.0002);
-  ctx.closePath();
-  ctx.moveTo(36.077892,19);
-  ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084);
-  ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19);
-  ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916);
-  ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19);
-  ctx.closePath();
-  ctx.fill('evenodd');
-};

omega-web/img/icons/omega-action.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="38"
+   height="38"
+   version="1.1">
+  <path
+     d="M 19 19 m -19 0 a 19 19 0 1 0 38 0 a 19 19 0 1 0 -38 0 M 19 19 m -9.5 0 a 9.5 9.5 0 1 0 19 0 a 9.5 9.5 0 1 0 -19 0"
+     fill-rule="evenodd"
+     fill="#31afec"
+     stroke="none" />
+</svg>

omega-web/img/icons/omega.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-   xmlns="http://www.w3.org/2000/svg"
-   width="19"
-   height="19"
-   version="1.1">
-  <path
-     d="m 14.045687,9.5001002 c 0,2.4548268 -2.035174,4.4448578 -4.5456868,4.4448578 -2.5105136,0 -4.545687,-1.990031 -4.545687,-4.4448578 0,-2.4548275 2.0351734,-4.4448583 4.545687,-4.4448583 2.5105128,0 4.5456868,1.9900308 4.5456868,4.4448583 z m 3.993259,-1.001e-4 c 0,4.6113259 -3.823017,8.3495419 -8.5389459,8.3495419 -4.7159298,0 -8.5389462,-3.738217 -8.5389462,-8.3495419 0,-4.6113251 3.8230164,-8.3495426 8.5389462,-8.3495426 4.7159289,0 8.5389459,3.7382175 8.5389459,8.3495426 z"
-     fill-rule="evenodd"
-     class="profile-color"
-     fill="#31afec"
-     stroke="none"
-     id="profile-circle" />
-</svg>

omega-web/img/icons/omega_svg.js

@@ -1,37 +0,0 @@
-var drawOmega = function (ctx, outerCircleColor, innerCircleColor) {
-  ctx.clearRect(0,0,19,19)
-
-  if (innerCircleColor != null) {
-    ctx.save();
-    ctx.fillStyle = innerCircleColor;
-    ctx.beginPath();
-    ctx.moveTo(14.05,9.50);
-    ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94);
-    ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50);
-    ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06);
-    ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50);
-    ctx.closePath();
-    ctx.fill('evenodd');
-    ctx.restore();
-  }
-
-  ctx.save();
-  ctx.fillStyle = outerCircleColor;
-  ctx.beginPath();
-  ctx.moveTo(14.05,9.50);
-  ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94);
-  ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50);
-  ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06);
-  ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50);
-  ctx.closePath();
-  ctx.moveTo(18.04,9.50);
-  ctx.bezierCurveTo(18.04,14.11,14.22,17.85,9.50,17.85);
-  ctx.bezierCurveTo(4.78,17.85,0.96,14.11,0.96,9.50);
-  ctx.bezierCurveTo(0.96,4.89,4.78,1.15,9.50,1.15);
-  ctx.bezierCurveTo(14.22,1.15,18.04,4.89,18.04,9.50);
-  ctx.closePath();
-  ctx.fill('evenodd');
-  ctx.restore();
-  ctx.save();
-  ctx.fillStyle = outerCircleColor;
-};