title: Create base64 circle on fly
body: <p>I want draw a PNG (with transparent) circle on fly and produce a base64 image, this is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function createCircle(size, color) {
      const canvas = document.createElement("CANVAS");
      canvas.width = size;
      canvas.height = size;
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = color;
      context.beginPath();
      context.arc(200, 200, 80, 0, 2 * Math.PI);
      context.fill();
      return canvas.toDataURL('image/png');
  }
  
  const base64 = createCircle(100, 'red');
  console.log(base64);
  
  document.getElementById('test').src = base64;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img width="100" height="100" id="test" style="border: 1px solid black"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But the image is empty...</p>
  <p>EXPECTED RESULT</p>
  <p><a href="https://i.stack.imgur.com/MFJJR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MFJJR.png" alt="enter image description here" /></a></p>