wisniewski94/app.js

## app.js
const {
  app, BrowserWindow, TouchBar, nativeImage, ipcMain,
} = require('electron');

const { TouchBarScrubber, TouchBarButton } = TouchBar;

const image = nativeImage.createFromPath('./m.png').resize({ height: 30 });

app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  const button = new TouchBarButton({
    backgroundColor: '#eb4d4b',
    click: () => {
      win.loadURL('https://github.com/wisniewski94');
    },
  });

  const touchBar = new TouchBar({
    escapeItem: button,
  });
  win.loadFile('index.html');
  win.webContents.openDevTools();
  win.setTouchBar(touchBar);
  ipcMain.on('newImage', (event, arg) => {
    button.label = '';
    button.icon = nativeImage.createFromBuffer(arg).resize({ height: 23 });
  });
});

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>

<body>
    <canvas id="canvas" width="100" height="100" style="display: none"></canvas>
    <script>
        const { nativeImage, ipcRenderer } = require('electron');
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.src = './glyph.png'
        img.onload = () => {
            canvas.width = 200;
            canvas.height = 30;
            ctx.imageSmoothingQuality = 'high';
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 30, 30);
            ctx.font = "12px Roboto";
            ctx.fillStyle = 'white';
            ctx.fillText("Check out my GitHub profile:", 40, 11);
            ctx.font = "600 16px Roboto";
            ctx.fillText("wisniewski94", 40, 29);
            const data = canvas.toDataURL('image/png', 1);
            const image = nativeImage.createFromDataURL(data).toPNG();
            ipcRenderer.send('newImage', image);
        }
    </script>
</body>

</html>
	const {
	app, BrowserWindow, TouchBar, nativeImage, ipcMain,
	} = require('electron');

	const { TouchBarScrubber, TouchBarButton } = TouchBar;

	const image = nativeImage.createFromPath('./m.png').resize({ height: 30 });

	app.on('ready', () => {
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	},
	});

	const button = new TouchBarButton({
	backgroundColor: '#eb4d4b',
	click: () => {
	win.loadURL('https://github.com/wisniewski94');
	},
	});

	const touchBar = new TouchBar({
	escapeItem: button,
	});
	win.loadFile('index.html');
	win.webContents.openDevTools();
	win.setTouchBar(touchBar);
	ipcMain.on('newImage', (event, arg) => {
	button.label = '';
	button.icon = nativeImage.createFromBuffer(arg).resize({ height: 23 });
	});
	});
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
	</head>

	<body>
	<canvas id="canvas" width="100" height="100" style="display: none"></canvas>
	<script>
	const { nativeImage, ipcRenderer } = require('electron');
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	const img = new Image();
	img.src = './glyph.png'
	img.onload = () => {
	canvas.width = 200;
	canvas.height = 30;
	ctx.imageSmoothingQuality = 'high';
	ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 30, 30);
	ctx.font = "12px Roboto";
	ctx.fillStyle = 'white';
	ctx.fillText("Check out my GitHub profile:", 40, 11);
	ctx.font = "600 16px Roboto";
	ctx.fillText("wisniewski94", 40, 29);
	const data = canvas.toDataURL('image/png', 1);
	const image = nativeImage.createFromDataURL(data).toPNG();
	ipcRenderer.send('newImage', image);
	}
	</script>
	</body>

	</html>