cost of different approaches to drawing animated graphics

I am wondering what the different costs are of the different aproaches to drawing graphics.
What is the least / most expensive in terms of CPU time and how could it be meaured ?

For example:

// option (1) draw using fillpoly to the screen direct
// example: gps Route Viwer
g.fillPoly(....);

// option (2) have the image as a Object String in a function
// example widgps (most widgets)
var img = E.toArrayBuffer(atob("...."));
g.drawImage(img, x, y);

// option (3) draw image read out of flash
// example ??
g.drawImage(require("Storage").read("cloud.img"));

// option (4) write the image to an ArrayBuffer
// example magnav, arrow compass
var buf1 = Graphics.createArrayBuffer(160,160,1, {msb:true});

function d() {
  var img = require("heatshrink").decompress(atob("..."));
  buf1.drawImage(img, 80, 80, {scale:3,  rotate:radians(course)} );
  // other draws, then call a flip function
  flip1(40, 30);  // draws the image into the graphics array
}

My reason for asking is that I have done an app with graphics using option (4). The app is a vraiant of GPS Navigation which an animated arrow for the compass direction. I have noticed with my App and GPS Navigation that after a while the buttons become unresponsive and often have to be pressed to 2,3,4 times to get the necessary response. It is maybe not noticeable with Apps that dont require much interaction wth the butons.

Be great to have a sample App that did the same thing in differnce ways but you could compare the cost in terms of RAM, CPU, time etc. Maybe one day I will get round to write it.

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!

I had a bit of code that was repeatedly doing:

function d() {
  var img = require("heatshrink").decompress(atob("..."));
 g.drawImage(img, 80, 80, {scale:3,  rotate:radians(course)} );
}

when what was effective / needed was:

var img = require("heatshrink").decompress(atob("..."));
 
function d() {
  g.drawImage(img, 80, 80, {scale:3,  rotate:radians(course)} );
}