Draw text in chrome

damien_64

in Processing with Other Languages • 2 years ago

Hello,

I am frenh, sorry for my mistakes.

I implement a little program with processing.js, i draw an ellipse and under a text :
fill(255);
ellipse(100, 100, 50, 50);
fill(0);
text("MyText", 100, 150);

Ellipse and text are ok when i run my program in firefox but in chrome the text is not displayed.

Have you got an idea ?

Thanks,

Damien.

Replies(7)

PhiLho

Re: Draw text in chrome

2 years ago

I don't know if it is necessary for Processing.js, or even if it is possible, but perhaps you should choose a font (createFont/textFont).

damien_64

Re: Draw text in chrome

2 years ago

Hello,

Thanks for your answer.

It's a good idea, i see the difference in mozilla but i don't see the text in chrome.

My program is :

function InitDraw(){

      var elem = document.getElementById('canvas');
      var processing = Processing(elem);
      var fontA;

      processing.setup = function() {
                //Size of canvas
                processing.width = elem.width;
                processing.height = elem.height;

                processing.size(processing.width, processing.height);
                processing.noStroke();

                fontA = processing.loadFont("Verdana");
    }

      processing.draw = function() {
               processing.clear();

               processing.fill(204, 120);
               processing.rect(0, 0, processing.width, processing.height);

                processing.fill(255);
                processing.ellipse(100, 100, 50, 50);
                processing.fill(0);
                processing.textFont(fontA, 10);
                processing.text("MyText", 100, 150);
      }

      processing.init();
}

Damien.

PhiLho

Re: Draw text in chrome

2 years ago

Mmm, I went to http://processingjs.org/learning/ide and pasted the code below, which is just your code remade in Processing format. It displayed correctly in Firefox and in Chrome, on Windows.

var fontA;
void setup() {
//Size of canvas
size(250, 250);
noStroke();
fontA = loadFont("Verdana");
textFont(fontA, 10);
}
void draw() {
background(200);
fill(204, 120);
rect(0, 0, width, height);
fill(255);
ellipse(100, 100, 50, 50);
fill(0);
text("MyText", 100, 150);
}

damien_64

Re: Draw text in chrome

2 years ago

Hello,

I test like you the code and it run in Firefox and Chrome.

So i create a file : TestTextInChrome.html.
The script of this file is :

<html>
    <head>
        <script language="javascript" src="processing.init.js"></script>
        <script language="javascript" src="processing.js"></script>
    </head>

    <body>
        <script type="application/processing">
            // Global variables
            var fontA;

            // Setup the Processing Canvas
            void setup(){
                //Size of canvas
                size(250, 250);
                noStroke();
                fontA = loadFont("Verdana");
                textFont(fontA, 10);
            }

            // Main draw loop
            void draw(){

                background(200);
                fill(204, 120);
                rect(0, 0, width, height);

                fill(255);
                ellipse(100, 100, 50, 50);
                fill(0);
                text("MyText", 100, 150);
            }
        </script>

        <canvas width="250px" height="250px"></canvas>

    </body>
</html>

The text is not displayed in Chrome but it's displayed in Firefox.

I have Firefox 3.6.13 and chrome 8.0.552.237.

A problem with canvas ?
Exist an other solution for displaying this script ?

pleabarga..

Re: Re: Draw text in chrome

2 years ago

You may want to update your Chrome as that is an older version.

PhiLho

Re: Draw text in chrome

2 years ago

I do have the same version of Chrome (on Windows) and it says it is the latest version... (they update automatically anyway).

I tested the code you gave as is, and it works for me, on Windows 7, on Firefox and Chrome.

damien_64

Re: Draw text in chrome

2 years ago

Hello,

With your answer, i suspected my version of processing. In fact, i download processing.js and processing.init.js from a website.

So i dowload the last version on http://processingjs.org/download, i adapt my program and it works with Firefox and Chrome.

Thanks for all,

Damien.

Top Reply