On iOS may run onDraw functions up to 60 times per second. Thanks to high FPS, optimization of this function is very important. Every calculation and creating new objects in drawing functions slows this function. Non-optimalized function may contain a lot of operations, which causes that this function runs too long.

I have created two sample applications. First, non-optimalized, contains lots of calculations and objects' creating. These operations take too much time to run in onDraw function. This sample codes uses Moscrif SDK.

Non-optimized function:

…= function(sender, canvas)
{
//create objects
var textPaint = new Paint();
textPaint.color = 0xff7DFAFF;
textPaint.typeface = Typeface.fromName(“36 days ago BRK”);
textPaint.textSize = System.width / 10;

var paint = new Paint();
paint.color = 0xffffffff;
//vector drawing var top = sender.height/2 -  sender.height/4 + 2;
app.drawCenteredPath(canvas, app.icons[#menuShadow], paint, sender, 0, top, System.width);
//create shader
var start = {
…
}
var end = {
…
};
…
var clrs = new Array();
…
var pos = new Array();
…
var shader = Shader.linear(pts, clrs, pos,0);
paint.shader = shader; //native drawing
canvas.drawRect(0, 0, System.width, sender.height - sender.height/4, paint);
//calculations
var textAreaHeight = sender.height - sender.height/4;
//time string creating
var timeString = sender.time / 60 + “:” + sender.time%60;
var (w, h) = textPaint.measureText(timeString);
canvas.drawText(timeString, sender.width / 2 - w / 2, textAreaHeight / 3 + h / 2, textPaint);
}

Optimized function:

function drawMenu(sender, canvas)
{
this.paint.color = 0xffffffff;
canvas.drawPath(this.whitePath, this.paint);
//draw rect filled with gradient
canvas.drawRect(0, 0, System.width, sender.height - sender.height/4, this.shaderPaint);
  //draw vector path of menu graphics
canvas.drawPath(this.blackPath, this.shaderPaint);
canvas.drawText(this._timeString, sender.width / 2 - this.timeWidth / 2, sender.height / 4 + this.timeHeight / 2, this.timePaint);
canvas.drawText(this._text, sender.width / 2 - this.textWidth / 2, sender.height / 2 + this.timeHeight / 2, this.textPaint); }

As you can see optimized function calls only methods from native canvas object. Thanks to the hardware graphics accelerator on devices are these calls extremely fast. Optimized function runs fast and reliable. Optimized function also requires less processor performance, what means that battery life is also longer.
Thanks to this type of optimization your applications will able to achive heigh avarage FPS and draw smooth graphics.