Solution 1 :

In the doc they say: "The Menu class is only available in the main process, but you can also use it in the render process via the remote module."

I only use ContextMenu But it should work the same.
In my renderer code I do:

const {
} = require('electron').remote;

and define my Menu

const menuCloneVin = new Menu();
  menuCloneVin.append(new MenuItem({
    label: 'My Item Label',
    click() {
     // code to execute when click

Problem :

I am building a paint app using html canvas. Also I am using menu buttons to change active color, shapes and to switch fill option. So all my logic lives in canvas.js file imported in index.html, where I manage canvas, but my current settings live in index.js. But I can’t find a way to speak between index.js and this script file. Now every time I start to draw – I send a IPC request to main file and get back current settings, but that is not fast enough method. Ideally I need to already have my current settings ready in this canvas.js file by the time I start to draw something. What is the best way to do it?


const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let win;

let color = '#ffff00';
let shape = 'PointShape';
let fill = true;


ipcMain.on('getSettings', (event) => {
  event.reply('letSettings', color, shape, fill);


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Electron Paint App</title>
    <link rel="stylesheet" href="./style.css" />
    <canvas id="canvas"></canvas>
    <script src="canvas.js"></script>


window.addEventListener('load', () => {
    require('events').defaultMaxListeners = 9999;
    const { ipcRenderer } = require('electron');


function startPosition(e) {
        ipcRenderer.on('letSettings', (event, color, shape, fill) => {
            curColor = color;
            curShape = shape;
            curFill = fill;

..."mousedown", startPosition);


Comment posted by Alain BUFERNE

Even If I didn’t catch everything, if you have a global reference to your canvas why you don’t have either a reference to your settings?

Comment posted by John

@alain-buferne I reference canvas in the file it is declared in, which is loaded into that html file like a script. But when I click a button – that action is happening in electron main file and, as I understand, it does not know that this script file exists. So the only way I see is to ask smth at this script file, like I am doing now with IPC. But something like global state for that is what I am looking for.

Comment posted by Alain BUFERNE

When you click a button the event should be managed by an eventHandler inside the renderer not the main/ The main (what you call index.js) is there to deal with all the stuff related to your system(file system, contextual menu, windows instantiation etc…). So either yout settings are read through a file and don’t change and will be read in the main and send to the renderer through a message or if the setting is variable due to buttons action in the renderer and you access directly to them…

Comment posted by John

@alain-buferne by button I mean native chromium top menu bar. So it is happening in main js. And if I understand correctly I can’t initiate an IPC to renderer when I clicked that button and changed variable in main, cause main does not know about who is renderer untill it knocks. Sorry if I understand this wrong..

Comment posted by John

Oh, that is what I was looking for. Thank you!