JSFiddle - React, Tailwind, and code Playground

by g

JavaScript

var count = 3;

// Setup
var icoUrl = "/favicon.ico";
var link = document.createElement('link');
link.rel = "icon"; 
link.type = 'image/x-icon';
link.href = icoUrl;
document.head.appendChild(link);

//
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img,0,0); // Or at whatever offset you like  
    
    
  context.beginPath();
  var rectSize = canvas.width/2;
  context.rect(rectSize, rectSize, rectSize, rectSize);
  context.fillStyle = 'red';
  context.fill();
  
  context.fillStyle = 'white';
  context.font = "bold " + rectSize + "px Arial";
  context.fillText(count + '', rectSize*1.1, rectSize*1.9);    
    
  var pngDataUrl = canvas.toDataURL();
  link.href = pngDataUrl;
  document.title = "Yataaaa";
};
img.src = icoUrl;

document.body.appendChild(canvas);