Javascript and processingjs

bland1t

in Processing with Other Languages • 1 year ago

Hi, i a nuwb using processingjs, i have a little problem.

i want to insert a text (using textarea) to my canvas, so the user can input a text from the textarea, after click a button, the text appear to the canvas, but it never appear.. there is my code:

<html>
<head>
<title>Input</title>
<script src="processing.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
function drawSomeText(id) {
var pjs = Processing.getInstanceById(id);
var text = document.getElementById('inputtext').value;
pjs.drawText(text); }
</script>
</head>
<body>
<center><p>
<script type="application/processing" data-processing-target="mycanvas">
PImage img;
void setup(){
frameRate(30);
img = loadImage("data/jaket.jpg");
size(400, 400);
}
void show_letter(){
PFont fontA = loadFont("Arial");
textFont(fontA, 20);
textAlign(CENTER);
fill(255);
letter = "testing";
text(letter, 100, 100);
}
void draw(){
background(img);
show_letter();
}
</script>
<canvas id="mycanvas" width="400" height="400"></canvas>
<input type="textfield" value="my text" id="inputtext"/>
<button onclick="drawSomeText('mycanvas')"></button>
</p></center>
</body>
</html>

Please help me..

thanks,

Replies(1)

PhiLho

Re: Javascript and processingjs

1 year ago

I don't know much about PJS, even less about integration with JS. But I find strange that you call a function (drawText(s)) that doesn't seem to be defined in your code. If that's a built in function of PJS, ignore my message (but then, why it doesn't have coordinates in the call?).

PS.: Perhaps in the OK in PJS, but in regular Processing we would advice to do the loadFont() in setup(). I doubt it is necessary to do it on each frame, anyway.

Top Reply