› ›

Two Canvas, problem with positions.

DDv2FFDDv2FF
edited March 2018 in p5.js Programming Questions

Hi. I wanted to create more canvas in my page, and I found this.
https://github.com/processing/p5.js/wiki/Instantiation-Cases
And I have two canvas now, but when i pass an argument for the node, it doesn't work. I want to give a canvas to each paragraph. Also, I cant use createElements , position, or parent, etc, into the instances . What is missing ? Or what im doing wrong ?

var mycanvas = function(canvas1){
    canvas1.setup = function(){
        canvas1.createCanvas(500, 500);
        canvas1.background(0);
    };
};

var my2canvas = function(canvas2){
    canvas2.setup = function(){
        canvas2.createCanvas(500, 500);
        canvas2.background(255, 0, 0);
    };
};
new p5(mycanvas, "#fcanvas");
new p5(my2canvas, "#scanvas");

And the Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>twoCanvas</title>

    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.dom.js"></script>
    <script src="libraries/p5.sound.js"></script>
    <script src="sketch.js"></script>

    <style>

    </style>
</head>
<body>
</p id = "fcanvas">First Canvas</p>
</p id = "scanvas">Second Canvas</p>

</body>
</html>
Tagged:

Best Answer

Answers

  • kfrajerkfrajer

    You have the wrong tag when starting a paragraph. Also div is probly what you need in these cases....

    Kf

  • DDv2FFDDv2FF
    edited March 2018

    I tried again, but it still not working.. is there another way to have two canvas.. ?

    <body>
<div id = "fcanvas"></div>
<div id = "scanvas"></div>

</body>
  • DDv2FFDDv2FF

    Omg. Now, I didn't pass a node, instead, I created a variable to create the canvas. And then I use that variable to "parent" the canvas to the div.
    I almost screamed for the happiness, and considering the hour, I thing I just save myself of dying.

    var mycanvas = function(canvas1){
        canvas1.setup = function(){
        canvas1.createCanvas(500, 500);
        canvas1.background(0);
    };
};

var my2canvas = function(canvas2){
    canvas2.setup = function(){

        canvas2.canvas = canvas2.createCanvas(500,500);
        canvas2.canvas.parent("#scanvas")

        canvas2.background(255, 0, 0);
    };
};
var canvasP = new p5(mycanvas);
var canvasSe = new p5(my2canvas);
  • GoToLoopGoToLoop
    edited March 2018 Answer ✓ 
    new p5(mycanvas, "#fcanvas");
new p5(my2canvas, "#scanvas");

    Those extra # seem wrong. AFAIK, they should exactly match those id attributes' name. :(|)

    new p5(mycanvas, 'fcanvas');
new p5(my2canvas, 'scanvas');
Sign In or Register to comment.