cost of different approaches to drawing animated graphics

It's difficult - they all have benefits and drawbacks depending on the data you are trying to send. What I usually do is:

var t = getTime();do_something;print(getTime()-t)

Then you can see how long each call takes.

But to give you an idea:

• fillPoly - very fast, but you may have to do some work to avoid flicker if you're moving the poly around and trying to clear the background
  
• drawImage with image in code - pretty fast for small images. If you need to be really fast you can keep img defined between calls
  
• drawImage from storage - faster than above for big images. For small images the overhead of finding the file may be high. If you do var img = require("Storage").read... once first then it should be very speedy though
  
• Option 4 - I'm not sure all the code is there but I think there are two parts:
  
• createArrayBuffer offscreen buffer. This is pretty quick to render to, and Bangle.js is very speedy to render it to the screen if you don't scale or rotate it. The bit benefit here if you don't get any flicker
  
• drawImage rotated - it's not that fast, but obviously you can draw a nice image. If you don't need rotation, drawing unrotated is better. If you are using it just to draw a simple shape (which I guess you are as it's just a 1 bit image buffer) then you'd be better off using fillPoly though -you can use http://www.espruino.com/Reference#l_Graphics_transformVertices to do the rotation for you
  
  

Hope that helps!