How to enable the panel to select the thickness and color of the pencil or marker?

[ghost]

Muaz, thanks for the example https://www.webrtc-experiment.com/Canvas-Designer/

How to enable in Chrome browser the panel to select the thickness and color of the pencil or marker? I search marker-stroke-style and marker-color-container through the instructions but did not see the answer.

[footniko]

In the widget.js change to the pencilDrawHelper.getOptions function (approx. line 1733) add this before return statement:

pencilLineWidth = document.getElementById('line-width-text').value;
pencilStrokeStyle = document.getElementById('stroke-style').value;

[ghost]

Thanks, footniko,
it helps:

pencilDrawHelper.getOptions = function() {
	pencilLineWidth = document.getElementById('line-width-text').value;
	pencilStrokeStyle = document.getElementById('stroke-style').value;

	return [pencilLineWidth, pencilStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font];
}

[ghost]

But the code has a separate possibility to change the parameters of the pencil. It seems that I do not know how to activate it.

[satyarihad]

Hi,
I am trying to change the thickness and color of pencil but its not working, can anyone help me.

Thanks

[Quadraphos]

But the code has a separate possibility to change the parameters of the pencil. It seems that I do not know how to activate it.

Do you find the way to activate it? I have been trapped here long time. Thanks in advanced.

[Larry-Arun]

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.
Because the function of setselection(this, shape) hides everything.

But the code has a separate possibility to change the parameters of the pencil. It seems that I do not know how to activate it.

Do you find the way to activate it? I have been trapped here long time. Thanks in advanced.

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.Because the function of setselection(this, shape) hides everything.

[Larry-Arun]

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.
Because the function of setselection(this, shape) hides everything.

But the code has a separate possibility to change the parameters of the pencil. It seems that I do not know how to activate it.

Do you find the way to activate it? I have been trapped here long time. Thanks in advanced.

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.Because the function of setselection(this, shape) hides everything.

[Larry-Arun]

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.Because the function of setselection(this, shape) hides everything.

[Quadraphos]

The function hidecontainers() in line 2886 of widget.js should be commented out to solve this problem.Because the function of setselection(this, shape) hides everything.

Thanks for your reply. I have already figured out the problems. But I didn't try to solve it in widget.js. I solved it in canvas-designer.html. Here is my code, by using this code. You can use pencil and marker container by doubleclick icon.

function setStyle(){
var markerSel = designer.iframe.contentWindow.document.getElementById("marker-icon");
var pencilSel = designer.iframe.contentWindow.document.getElementById("pencil-icon");

markerSel.ondblclick = function (){
    designer.iframe.contentWindow.document.getElementById("marker-container").style.display = 'block';
}
pencilSel.ondblclick = function (){
    designer.iframe.contentWindow.document.getElementById("pencil-container").style.display = 'block';
}

}
setTimeout("setStyle()", 3000);

I think this way is more efficient.