CODEWITHSUNDEEP
javascripthtmlcanvas
codeitup
codeitup

Reputation: 65

Referencing canvas with button in Javascript

Ok so I'm attempting to have a webpage with two buttons. Each of these buttons, when clicked, creates a new canvas and calls a different draw function. The first draw function would draw large circles where the users mouse is and small ones when the mouse is pressed. The other draw function does the same thing except small circles when the mouse is unpressed and large ones when it is. I'm not having a problem referencing one of these with the button but the other button doesn't seem to call its draw function. sketch2.js seems to be working fine but it seems that the draw function in sketch.js is not being called. Any advice on how I should go about fixing this is greatly appreciated!

Below is my HTML code:

<html>
<head>
  <meta charset="UTF-8">
    <button id="myBtn">little then big</button>
    <div id="holder"></div>

    <button id="myBtn2">big then little</button>
    <div id="holder2"></div>

    <style> body {padding: 0; margin:0;} </style>
</head>

<body>

    <script type="text/javascript" src = "/Users/bburke95/Desktop/JS/p5.dom.js"> </script>
    <script language="javascript" type="text/javascript" src="../p5.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <script language="javascript" type="text/javascript" src="sketch2.js"></script>

</body>
</html>

This is my sketch.js class

btn = document.getElementById("myBtn");
var q;
btn.onclick = function setup() {
    createCanvas(640, 480);
    document.getElementById("holder").innerHTML = '<canvas id="myCanvas" width="490" height="220"></canvas>';
    q = 1;
    set = 0;
}

function draw() {
    if (q == 1) {
        var x;
        var y;
        if (mouseIsPressed) {
            fill(255);
            x = 160;
            y = 160;
        } else {
            fill(0);
            x = 80;
            y = 80;
        }
        ellipse(mouseX, mouseY, x, y);
    }
}

and this is my sketch2.js class

btn2 = document.getElementById("myBtn2");
var set;
btn2.onclick = function setup() {
    createCanvas(640, 480);
    document.getElementById("holder2").innerHTML = '<canvas id="myCanvas2" width="490" height="220"></canvas>';
    set = 1;
    q = 0;
}

function draw() {
    if (set == 1) {
        var x;
        var y;
        if (mouseIsPressed) {
            fill(0);
            x = 80;
            y = 80;
        } else {
            fill(255);
            x = 160;
            y = 160;
        }
        ellipse(mouseX, mouseY, x, y);
    }
}

Upvotes: 0

Views: 407

Answers (1)

timgvandijk
timgvandijk

Reputation: 439

If you want to run more than one P5.js processing sketches on the same page, you have to use "instance mode" to ensure that all the functions aren't cluttering the global namespace (which is a good idea anyway) so they don't overwrite one another.

From their Github project, you can instantiate new sketches like this:

var s = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
  };
};

var myp5 = new p5(s);

Upvotes: 1

Related Questions