Problema de canvas duplicado en HTML5

Hay un problema engorroso que sucede con el navegador nativo de Android, y es que trabajando con el canvas de HTML5, realiza un duplicado exacto de los canvas que hayas creado en el document.
Lo añade a la coordenada (0,0) del document y se actualiza en tiempo real, de forma simultánea con el canvas original. Es decir, que cuando muevo una de las fichas en el canvas de la derecha, se mueve por igual en el de la izquierda, pero solo el de la derecha es sensitivo a interacción.
Es por tanto un problema de pintado del navegador. Sólo sucede en los navegadores nativos de Android de versión 4 o superior.

Error de Canvas duplicado
Error de Canvas duplicado

Surge además cuando estos canvas están integrados dentro de DIVs, y estos a su vez dentro de otros DIVs.
Haciendo pruebas con las css de dichos canvas, ví que solo se producía el duplicado cuando la propiedad position del canvas era diferente de fixed. Pero claro, es una solución incómoda, ya que un elemento fixed en medio de la pantalla, no se permitible salvo que esté totalmente integrado. En mi caso particular en esta pantalla, si servía, pero pensando en general, para cualquier sitio mas dinámico respecto al responsive design, no era una opción válida.

Continuando con la búsqueda de una solución, encontré una mejor, al descubrir que si alguno de los objetos contenedores tenía la propiedad overflow: hidden, también se producía. Si se puede permitir la posibilidad de desactivar los scrollbars, ya podemos quitar el fixed al position del canvas.

Elucubro, que de alguna manera internamente, para calcular la porción pintable del canvas, crean una copia temporal en el (0,0), despues la pintan en su coordenada real, pero se han olvidado de borrar la temporal.

Cómo añadir código embebido dentro de nuestros post en WordPress

Instalando el siguiente plugin y con muy poco trabajo podemos incorporar fragmentos de código para mostrar a nuestros lectores.

http://alexgorbatchev.com/SyntaxHighlighter/

Una vez instalado, será tan sencillo como escribir el tag

[ c o d e    l a n g u a g e = ” j a v a s c r i p t ” ]

A continuación nuestro código a mostrar y despues cerrar con [/code]

Nota: Se han incluido espacios extras entre las letras de la sentencia anterior para evitar que se interpreten en el post.

Evidentemente soporta mas lenguajes a parte de javascript. Con cambiarlo con uno de la lista de permitidos será suficiente.

Debe escribirse en la parte HTML de nuestro editor, no en la visual, ya que si no, el propio editor de WordPress se confundirá y corromperá el resultado.

El siguiente fragmento:

 

sintaxisplana

 

 

 

 

 

 

generará el siguiente resultado:

 

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.fillStyle = "blue";
c.roundRect(50, 100, 50, 100, {upperLeft:10,upperRight:10}, true, true);

 

En la web de Alex Gorbatchev podeis encontrar los lenguajes admitidos y como crear los que necesiteis.

RectRound Redondeando tus rectángulos con javascript.

Ojeando por StackOverFlow voy a rescatar una función muy resultona para redondear las esquinas de los rectángulos.

/**
 * Draws a rounded rectangle using the current state of the canvas.
 * If you omit the last three params, it will draw a rectangle
 * outline with a 5 pixel border radius
 * @param {Number} x The top left x coordinate
 * @param {Number} y The top left y coordinate
 * @param {Number} width The width of the rectangle
 * @param {Number} height The height of the rectangle
 * @param {Object} radius All corner radii. Defaults to 0,0,0,0;
 * @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
 * @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
 */
CanvasRenderingContext2D.prototype.roundRect = function (x, y, width, height, radius, fill, stroke) {
    var cornerRadius = { upperLeft: 0, upperRight: 0, lowerLeft: 0, lowerRight: 0 };
    if (typeof stroke == "undefined") {
        stroke = true;
    }
    if (typeof radius === "object") {
        for (var side in radius) {
            cornerRadius[side] = radius[side];
        }
    }

    this.beginPath();
    this.moveTo(x + cornerRadius.upperLeft, y);
    this.lineTo(x + width - cornerRadius.upperRight, y);
    this.quadraticCurveTo(x + width, y, x + width, y + cornerRadius.upperRight);
    this.lineTo(x + width, y + height - cornerRadius.lowerRight);
    this.quadraticCurveTo(x + width, y + height, x + width - cornerRadius.lowerRight, y + height);
    this.lineTo(x + cornerRadius.lowerLeft, y + height);
    this.quadraticCurveTo(x, y + height, x, y + height - cornerRadius.lowerLeft);
    this.lineTo(x, y + cornerRadius.upperLeft);
    this.quadraticCurveTo(x, y, x + cornerRadius.upperLeft, y);
    this.closePath();
    if (stroke) {
        this.stroke();
    }
    if (fill) {
        this.fill();
    }
}

Y se usa con:

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
c.fillStyle = "blue";
c.roundRect(50, 100, 50, 100, {upperLeft:10,upperRight:10}, true, true);

También se pueden usar lowers.

Un ejemplo de como funciona, sobre las cuatro esquinas, y admite distintos niveles de redondeo independientes.

 

 

solo con Rect
Solo con Rect

 

 

 

 

 

 

 

 

 

 

Con RoundRect
Con RoundRect

 

 

 

 

 

 

 

 

 

 

 

Podeis ampliar información en : http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas