Question

I just experimented a bit with Javascript and HTML5 canvas and when I saw it in my browser (chrome) I realised that it’s not very pretty rendered. After that I saw it in the Internet Explorer and there it looks even more crawful. I made a little Example: http://ios.xomz.de/
I just declared the canvas object in the html code

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

and rendered into it with

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);

for example.

Can you explain why the rendering isn’t good ?

Answer 1

This problem is related to the way objects are drawn on a float based grid (especially vertical and horizontal lines and thus rects).

See there for an explanation and a schema : http://canop.org/blog/?p=220

Depending on the size of your objects, you need to use integer or mid-integer coordinates and sizes for your shapes, the goal being to fill complete pixels in both dimensions.

For example :

• use a mid-integer for a thin line (one pixel width)
• use an integer coordinate for a 2 pixels wide line

(and extend the logic for rects)

In your case, with a line width of 5, you have sharper rects by using this :

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

Demonstration here : http://jsfiddle.net/dystroy/TyNBB/