I have added a button using HTML tag and now I want to change a variable inside of a JS within OnReady action. I understand that the ID for this is needed, so I made a new ID and then referenced the id of the element into the JS but I don't understand how to proceed further @Eric Bulters 

I am trying to lure in the functionality of fabric JS as mark-up or highlighting an image, I didn't know that outsystems button could be used in a JS. i need to trigger the .click() of this button in JS to change the mode of canvasIs this what you meant ?

I might still be misunderstanding what you need. But why don't you just use a normal button:

Have a CurrentMode variable on your screen

On the onClick of your button set CurrentMode to the correct value and use the variable in your javascript:

if your function is on a script where you can't reach the onscreen parameters you can define the variable you need in the page's javascript:

and set it in the onbuttonclick action

I'll share you my code it would make it easy to understand, since I am not good at it is better you have a look at it to understand.

var Id = document.getElementById($parameters.CanvasId);

//var canvas = new fabric.Canvas(Id, {

//    width: 272,

//    height: 272

//});

//canvas.renderAll();

//fabric.Image.fromURL('data:image/gif;base64,'+$parameters.image, function (img) {

//    canvas.backgroundImage = img;

//    canvas.renderAll();

//});

var initCanvas = function initCanvas(id) {

    return new fabric.Canvas(id, {

        width: 272,

        height: 272,

        selection: false

    });

};

var setBackground = function setBackground(url, canvas) {

    fabric.Image.fromURL(url, function (img) 

    {

    canvas.backgroundImage = img;

    canvas.renderAll();

    });

};

var canvas = initCanvas(Id);

setBackground('data:image/gif;base64,'+$parameters.image,canvas);

var mousePressed = false;

var currentMode = void 0;

var tPan = document.getElementById($parameters.PanId).click(function(){

    togglePan();

});

var togglePan = function togglePan() {

  if (currentMode === modes.pan) {

    currentMode = '';

  } else {

    currentMode = modes.pan;

  }

};

var modes = {

  pan: 'pan'

};

canvas.on('mouse:move', function (event) {

  if (mousePressed && currentMode === modes.pan) {

    canvas.setCursor('grab');

    canvas.renderAll();

    var mEvent = event.e;

    var Delta = new fabric.Point(mEvent.movementX, mEvent.movementY);

    canvas.relativePan(Delta);

  }

});

canvas.on('mouse:down', function (event) {

    mousePressed = true;

    if (currentMode === modes.pan){

    canvas.setCursor('grab');

    canvas.renderAll();}

});

canvas.on('mouse:up', function (event) {

  mousePressed = false;

  canvas.setCursor('default');

  canvas.renderAll();

});

This is the code within OnReady action. In the canvas.

I think you are building a widget in javascript, using canvas object.

It would be great if you would think of it as a component/widget and think what kind of interaction you want with the outside world. think of settings, properties and events.

Those properties you should link to Outsystem objects when creating an instance of your widget.

your code could look like this:

function onLoadMyObject(ContainerId, DisplayFileName, SelectedFile, contentType, MySaveFunction, MyCancelFunction) {   

    var mydiv = document.getElementById( ContainerId);

    MyObject.build(

            mydiv, {

                width: anonimyzerWidth,

                height: anonimyzerHeight,

                file: MyFile,

                onSave: function(files) {return uploadFile(files, DisplayFileName, MySaveFunction);},

                onCancel: function() {return MyCancelFunction()},

                onError: function(message) {window.alert("Oops :" + message)},

                watermarkLabel: "Watermarklabel",

            }

    );

    console.log('MyObject initialised');

}

And calling it:

onLoadMyObject($parameters.ContainerId, $parameters.DisplayFileName, $parameters.SelectedFile, $parameters.ContentType, $actions.OnSave, $actions.OnCancel);

So you can assign your client actions into your js code.

This is just a sample to show how to assign object, variables and even functions to properties and events.

Think of your widget as an object. what you want it to do, and then build it accordingly. This way you can reuse it more easily.

Seems okay but I don't understand the coding part can you give me a better explanation?