Tablet nueva, juegos rotos.

Hace pocos días llego por fin mi tableta (una gallaxy tab 2) y como podrán imaginar lo primero que hice fue probar los juegos que he desarrollado y para mi sorpresa varios de ellos no funcionaban correctamente; en algunos se veía un segundo canvas con la misma imagen y en otros el contenido previo no se borraba. Al parecer es un problema ya viejo con clearRect que afecta a android 4.1.

Lo primero que se me ocurrió para solucionar el problema fue el viejo truco de re-definir el tamaño del canvas:

canvas.width = canvas.width;

Ahora si que funcionaban, pero algunas acciones como el arrastrar eran realmente lentas (especialmente al arrastrar y soltar); el problema con este método es que ademas de borrar el contenido del canvas, también restablece su estado (fillStyle, clearStyle, scale, translate, shadowColor....) lo que al parecer influye en el rendimiento (al menos en el gallaxy tab - único dispositivo que tengo para hacer pruebas).

Otra de las soluciones sugeridas para eliminar el problema del canvas duplicado que encontré era el quitar el estilo overflow: hidden de todos los elementos padres del canvas, aunque el problema desapareció al igual que en el método anterior el rendimiento era pésimo.

Solución

Hasta el momento la solución con los mejores resultados es la de usar un color solido como fondo para el canvas y al momento de borrar el contenido usar fillRect en lugar de clearRect

<canvas style="background: #fff;"></canvas>

function clear(ctx) {
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

El aumento en rendimiento es considerable, sobre todo en juegos que requieren arrastrar y soltar (como el solitario). Aun así esta no es una solución definitiva ya que al usar un color solido no es posible apilar canvas para crear capas.

¿Conoces alguna mejor solución? déjala en los comentarios.