Javascript Canvas mal renderizado

Acabo de experimentar un poco con Javascript y HTML5 canvas y cuando lo vi en mi navegador (chrome) me di cuenta de que no está muy bien renderizado. Después de eso lo vi en Internet Explorer y allí se ve aún más gateante. Hice un pequeño ejemplo: http://ios.xomz.de/ Acabo de declarar el objeto canvas en el código html

<canvas id="mycanvas" width="1000px" height="600px"/>

y rendido en él con

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(200, 200, 600, 200);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.font = "40pt arial";
context.fillStyle = "black";
context.fillText("Hello World!", 220, 380);

por ejemplo.

¿Puede explicar por qué la representación no es buena?

preguntado el 03 de mayo de 12 a las 20:05

y cual es el problema con eso? ¿Qué esperas hacer que no está haciendo? -

Por cierto: perdón por mi mal inglés, soy de Alemania. -

2 Respuestas

No use "px", también recomendaría no usar una etiqueta de cierre automático:

<canvas id="mycanvas" width="1000" height="600"></canvas>

http://jsfiddle.net/c2KeD/

contestado el 03 de mayo de 12 a las 21:05

Esto no cambia nada. Consulte a continuación para obtener una explicación de por qué tanto su versión como la de OP son borrosas. - Denys Séguret

Esto no ayuda como dijo dystroy: Matías Herzog

Este problema está relacionado con la forma en que se dibujan los objetos en una cuadrícula basada en elementos flotantes (especialmente las líneas verticales y horizontales y, por lo tanto, los rectángulos).

Ver allí para una explicación y un esquema: http://canop.org/blog/?p=220

Según el tamaño de sus objetos, debe usar coordenadas y tamaños enteros o enteros medios para sus formas, con el objetivo de llenar píxeles completos en ambas dimensiones.

Por ejemplo:

  • use un entero medio para una línea delgada (ancho de un píxel)
  • use una coordenada entera para una línea de 2 píxeles de ancho

(y extender la lógica para rects)

En su caso, con un ancho de línea de 5, tiene rectas más nítidas al usar esto:

context.rect(200.5, 200.5, 600, 200);

Demostración aquí: http://jsfiddle.net/dystroy/TyNBB/

contestado el 03 de mayo de 12 a las 21:05

Realmente me alegro de aprenderlo. Como es su primera pregunta sobre SO, se supone que debe votar y aceptar esta respuesta :) - Denys Séguret

sí :) lo acepté pero para votar necesito más reputación... :/ - Matías Herzog

No preocupación. Mantenga el hábito de decir en un comentario cuando una solución funciona y le ayuda: Nos gusta saber cuándo somos útiles (o no). - Denys Séguret

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.