Background Image on Canvas

[Ali Özcan]

Hi Muaz (@muaz-khan).
Thanks for your nice code.

• Can I add background image on canvas?
• Can I make an authorization for one to many connections? For example, it cannot access toolbox.

Thank you in advance for your reply.

[Ali Özcan]

Second question is answered: #54

Please help me for First question.

Thanks...

[Lucas Himelfarb]

You can access the bottom of the canvas in the following way : designer.iframe.style.background = "";
you can access the toolbox as follows : window.frames[0].document.getElementById('tool-box')...;

at the moment, canvas designer is inside an iframe and that complicates everything..

[Ali Özcan]

@LucasHimelfarb , thank you for your answer.

I want to ask you. Not having canvas in white background. Adding an image and drawing on it.
Does not be done?

Thank you in advance for your reply.

[Muaz Khan]

@aaozcann Please try this:

var x = 0;
var y = 0;
var width = designer.iframe.clientWidth;
var height = designer.iframe.clientHeight;

var image = 'https://cdn.webrtc-experiment.com/images/RTCMultiConnection-STUN-TURN-usage.png';

var points = [
    ['image', [image, x, y, width, height, 1], ['2', '#6c96c8', 'rgba(0,0,0,0)', '1', 'source-over', 'round', 'round', '15px "Arial"']]
];

designer.syncData({
    startIndex: 0,
    points: points
});

Change image URL.

[Ali Özcan]

Thanks @muaz-khan
Your are best...