PhysicsJS Basic Demo Fail

Question

I'm trying to get the basic demo going for PhysicsJS but I'm getting results that I do not understand.

I have a one page HTML file as follows...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PhysicsJS</title>
  <style>
     body {
        background: white;
      }  
      #viewport {
        border: 1px solid #666;
      }
  </style>
</head>
<body>

<canvas id="viewport" width="500" height="500"></canvas>

<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.6.0/physicsjs-full-0.6.0.min.js"></script>

<script>

    Physics(function(world){

      var renderer = Physics.renderer('canvas', {
        el: 'viewport',
        width: 500,
        height: 500
      });

      world.add( renderer );

      var square = Physics.body('rectangle', {
        x: 250,
        y: 250,
        width: 50,
        height: 50
      });

      world.add( square );
      world.render();
    });

</script>

When load up this code in Safari browser I get a blank canvas with no square.

However when I open up the debugging tools and look at resources I see the square as a Base64 image.

screenshot: https://drive.google.com/file/d/0B0ANLX5liLSFM01uNmswX1VBNUE/edit?usp=sharing

I honestly don't know where I'm going wrong here and why the image is rendering as such.

Thanks in advance for any help.

Does it only not work in Safari? I've copied your code into a fiddle and it seems to work on: Chomre, IE, Firefox: http://jsfiddle.net/bdLjdcnx/ Also how many times did you try? It could of just been a network error. — Spencer Wieczorek, Sep 09 '14 at 01:37
Thanks for the suggestions. I also had it working in fiddle, but locally I was having problems. It does however seems to work in Chrome. Also no errors in the console for any browsers. I feel like it has something to do with document loading. I get different behavior when loading the physics.js script locally and remotely as well. The docs make no mention of needing to wait for a 'ready' event, but I'll try it anyway. — smatthews1999, Sep 09 '14 at 11:46

score 0 · Accepted Answer · answered Sep 10 '14 at 15:43

I think this is technically a "bug". When images for bodies are first created by the renderer they are cached as images. This is done by doing:

var img = new Image();
img.src = canvas.toDataURL('image/png');
return img; //...

That means that if the image doesn't "load" the data url before the renderer tries to render it, it won't show up. This is normally not a problem because stepping and rendering happens in a loop. So the next time around it will render it just fine. But safari seems to take it's sweet time loading the data URL... so on only one render it doesn't work. If you want you can log this as a bug on github... but i doubt you need this functionality. Just set up the loop and it will work just fine :)

PhysicsJS Basic Demo Fail

1 Answers1