Background image on canvas using paper js

[Rahul Saxena]

Hello, I am creating a whiteboard, I have created a tool that changes the background image of my canvas of the whiteboard. This tools is implemented by creating simple javascript function that changes the css of the canvas on click. The background is changed successfully, but there is an issue with this. When I am creating multiple sessions of my whiteboard of same whiteboard id, on changing the background it is not broadcasted to all the other sessions of whiteboard.

So please help me out in this issue.

[Peter Bengtsson]

Do you assign the same ID to the HTML tags (like <div id="a"></div>...<div id="a"></div>) then this is the issue, in HTML each id must be unique. If you want to change the style of several items at once you assign a class to then and change the style of that class.

[Rahul Saxena]

Yes that's right. But actually what I am doing is that, I have a one canvas element in the whiteboard, where I use to scriblle the pencil tool and what I want is to change the background of my canvas on click of some tool. I have done it with JS functions but issue with that is when I am creating multiple whiteboard sessions with the same whiteboard id generated by the server.

Code of my html is given below:-

<script>

//functions for grid background change

function english() {

    document.getElementById("myCanvas").style.backgroundImage = "url('../img/bg.png')";

}

function hindi() {

    document.getElementById("myCanvas").style.backgroundImage = "url('../img/bg1.png')";

}

function math() {

    document.getElementById("myCanvas").style.backgroundImage = "url('../img/bg2.png')";

}

function grid() {

    document.getElementById("myCanvas").style.backgroundImage = "url('../img/bg3.png')";

}

//functions for background color change

function red() {

    document.getElementById("myCanvas").style.backgroundColor = "red";

}

function green() {

    document.getElementById("myCanvas").style.backgroundColor = "green";

}

function black() {

    document.getElementById("myCanvas").style.backgroundColor = "black";

}

function yellow() {

    document.getElementById("myCanvas").style.backgroundColor = "yellow";

}

</script>

<canvas whiteboard class="board" id="myCanvas" resize="true">

</canvas>

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/p_wvu7vYEW4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to paperjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Peter Bengtsson]

Do you have a link to the page you are testing this one, so one can see the workspaces in action. It's quite hard to understand how exatcly you have set it up with different workspaces, and that makes it very hard to guess what is going wrong.

To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.