html页面字迹模糊,javascript – 如何修复我的HTML5画布中的模糊文本？

我是一个总共n00b与HTML5和我使用画布来渲染形状，颜色和文本。在我的应用程序，我有一个视图适配器动态创建一个画布，并用内容填充。这工作真的很好，除了我的文本被渲染非常模糊/模糊/拉伸。我已经看到了很多其他的帖子，为什么定义CSS的宽度和高度将导致这个问题，但我在JavaScript中定义它。

相关代码(查看Fiddle)：

HTML

Javascript

var width = 500;//FIXME:size.w;

var height = 500;//FIXME:size.h;

var canvas = document.createElement("canvas");

//canvas.className="singleUserCanvas";

canvas.width=width;

canvas.height=height;

canvas.border = "3px solid #999999";

canvas.bgcolor = "#999999";

canvas.margin = "(0, 2%, 0, 2%)";

var context = canvas.getContext("2d");

//

SHAPES

//

var left = 0;

//draw zone 1 rect

context.fillStyle = "#8bacbe";

context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);

left = left + canvas.width*1.5/8.5;

//draw zone 2 rect

context.fillStyle = "#ffe381";

context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);

left = left + canvas.width*2.75/8.5 + 1;

//draw zone 3 rect

context.fillStyle = "#fbbd36";

context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

left = left + canvas.width*1.25/8.5;

//draw target zone rect

context.fillStyle = "#004880";

context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);

left = left + canvas.width*0.25/8.5;

//draw zone 4 rect

context.fillStyle = "#f8961d";

context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);

left = left + canvas.width*1.25/8.5 + 1;

//draw zone 5 rect

context.fillStyle = "#8a1002";

context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);

TEXT

//user name

context.fillStyle = "black";

context.font = "bold 18px sans-serif";

context.textAlign = 'right';

context.fillText("User Name", canvas.width, canvas.height*.05);

//AT:

context.font = "bold 12px sans-serif";

context.fillText("AT: 140", canvas.width, canvas.height*.1);

//AB:

context.fillText("AB: 94", canvas.width, canvas.height*.15);

//this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.

var parent = document.getElementById("layout-content");

parent.appendChild(canvas);

我看到的结果(在Safari中)比在小提琴中显示的更加扭曲：

矿

小提琴

我做错了什么？我需要为每个文本元素单独的画布吗？是字体吗？我需要先在HTML5布局中定义画布吗？有打字错误吗？我搞不清楚了。